弹性盒子布局，flex布局

弹性盒子布局（Flexbox）是CSS3引入的一种新的布局模式，它提供了一种更加有效的方式来设计、布局和对齐容器中的项目，即使容器的大小动态改变或者项目的数量未知。

弹性盒子布局的主要特点是能够轻松地在不同的屏幕大小和设备上实现一致的布局，通过为父容器（弹性容器）设置display: flex;或display: inline-flex;来定义。弹性容器内的子元素（弹性项）会自动成为容器的成员，并按照弹性盒子的规则进行布局。

弹性盒子布局有以下主要优点：

  1. 灵活性：弹性盒子布局可以轻松地适应不同屏幕尺寸和设备，无论是桌面设备还是移动设备。

  2. 方向性：可以设置主轴的方向（水平或垂直），从而决定弹性项是水平排列还是垂直排列。

  3. 对齐方式：可以轻松地在主轴和交叉轴上对齐弹性项，包括两端对齐、居中、空间分布等。

  4. 顺序调整：通过order属性，可以改变弹性项在容器中的排列顺序。

  5. 弹性：弹性项可以根据需要增长或缩小，以适应可用空间。

  6. 包裹：如果弹性项在主轴上超出了容器的空间，可以设置弹性容器是否允许弹性项换行显示。

弹性盒子布局由两部分组成：弹性容器（flex container）和弹性项（flex items）。弹性容器通过一系列CSS属性来控制其子元素（弹性项）的布局，而弹性项则自动成为容器的成员并遵循容器的布局规则。

在弹性盒子布局中，有一些关键的CSS属性，如flex-direction、justify-content、align-items、flex-wrap、flex-grow、flex-shrink和flex-basis等，这些属性可以用来控制弹性容器和弹性项的行为和外观。

总之，弹性盒子布局是一种强大而灵活的布局模式，可以帮助开发人员更轻松地创建适应性强、易于维护的网页布局。

flex术语

序号

简记术语
1二成员容器和项目(container / item)
2二根轴主轴与交叉轴(main-axis / cross-axis)

3

二根线起始线与结束线(flex-start / flex-end)

弹性容器属性

  1. flex-direction
    • 定义主轴的方向，即弹性项默认的排列方向。
    • 可选值：row（默认值，水平方向从左到右）、row-reverse（水平方向从右到左）、column（垂直方向从上到下）、column-reverse（垂直方向从下到上）。
  2. justify-content
    • 定义弹性项在主轴上的对齐方式。
    • 可选值：flex-start（默认值，起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，弹性项之间的间隔相等）、space-around（每个弹性项两侧的间隔相等）、space-evenly（弹性项之间的间隔和两侧的间隔都相等）。
  3. align-items
    • 定义弹性项在交叉轴上的对齐方式（当弹性项为单行时）。
    • 可选值：stretch（默认值，如果弹性项未设置高度或设为auto，将占满整个容器的高度）、flex-start、flex-end、center、baseline（以第一行文字的基线对齐）。
  4. flex-wrap
    • 定义弹性项是否换行显示。
    • 可选值：nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。
  5. align-content
    • 定义多行弹性项在交叉轴上的对齐方式（当弹性项换行时）。
    • 可选值与 align-items 类似，但额外支持 stretch（默认值，如果弹性项未设置高度或设为auto，将占满整个容器的高度，但仅适用于多行）。
  6. flex-flow
    • 简化flex-direction，flex-wrap属性

弹性项属性

  1. flex-grow
    • 定义弹性项的放大比例。默认为 0，表示不放大。如果有剩余空间，则根据所有弹性项的 flex-grow 值来分配剩余空间。
  2. flex-shrink
    • 定义弹性项的缩小比例。默认为 1，表示如果空间不足，该项目将缩小。如果有空间不足的情况，则根据所有弹性项的 flex-shrink 值来缩小项目。
  3. flex-basis
    • 定义弹性项在主轴上的初始大小。默认为 auto，表示项目的大小由其内容决定。
  4. flex
    • 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，用于同时设置这三个值。例如，flex: 1 0 200px; 就等同于 flex-grow: 1; flex-shrink: 0; flex-basis: 200px;。
  5. order
    • 定义弹性项的排列顺序（整数，默认为0）。数值越小，排列越靠前。
  6. align-self
    • 允许单个弹性项覆盖由 align-items 设置的交叉轴对齐方式。可选值与 align-items 相同。

创建flex容器与项目

1.属性

display:flex                        创建flex块级容器

display:inline-flex              创建flex行内容器

主轴方向与多行容器

 <style>.container {width: 300px;height: 150px;background-color: pink;/* 可选值：row（默认值，水平方向从左到右）、row-reverse（水平方向从右到左）、column（垂直方向从上到下）、column-reverse（垂直方向从下到上）。 */display: flex;/* 设置主轴方向：水平方向 *//* flex-direction: row; *//* flex-direction: row-reverse; *//* 设置主轴方向：垂直方向 */flex-direction: column;/* flex-direction: column-reverse;  *//* 设置多行容器 *//* 可选值：nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。 *//* 默认单行容器，不允许换行显示，项目自动收缩适应容器大小 *//* flex-wrap: nowrap; */flex-wrap: wrap;}.item {width: 100px;height: 50px;background-color: lightcyan;}</style>
</head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body>

主轴项目对齐方式

 <style>.container {width: 300px;height: 150px;background-color: pink;display: flex;/* 默认从主轴的起始线排列 */justify-content: flex-start;/* 对齐到终止线 */justify-content: flex-end;/* 对齐到主轴的中间线，居中对齐 */justify-content: center;/* 两端对齐  剩余空间在头尾项目之外的项目间平均分配 */justify-content: space-between;/* 分散对齐  剩余空间在每个项目之间平均分配*/justify-content: space-around;/* 平均对齐 */justify-content: space-evenly;}.item {width: 50px;height: 50px;background-color: lightcyan;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></body>

交叉轴项目对齐方式

<style>/* 可选值：stretch（默认值，如果弹性项未设置高度或设为auto，将占满整个容器的高度）、flex-start、flex-end、center、baseline（以第一行文字的基线对齐）。 */.container {width: 300px;height: 150px;background-color: pink;display: flex;/* 主轴为水平方向 */flex-flow: row nowrap;/* 默认：从交叉轴的起始线开始排列，对齐到起始线 */align-items: flex-start;/* 对齐到终止线 */align-items: flex-end;/* 居中对齐 */align-items: center;}.item {width: 50px;height: 50px;background-color: lightcyan;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></body>

多行容器项对齐方式

<style>.container {width: 300px;height: 400px;background-color: pink;display: flex;/* 主轴为水平方向 */flex-flow: row wrap;/* 默认 */align-content: stretch;/* 与起始线对齐 */align-content: flex-start;/* 与终止线对齐 */align-content: flex-end;/* 居中对齐 */align-content: center;/* 两端对齐 */align-content: space-between;/* 分散对齐 */align-content: space-around;/* 平均对齐 */align-content: space-evenly;}.item {width: 100px;height: 50px;background-color: lightcyan;}
</style>
</head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div></div>
</body>

设置单个项目在交叉轴上的对齐方式

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;}.item {width: 100px;height: 50px;background-color: lightcyan;}.item:first-child {align-self: flex-start;/* auto 是默认值，继承的是容器中的align-items */align-self: auto;}.item:nth-child(2) {/* 第二个项目与中间线对齐 */align-self: center;}.item:nth-child(3) {/* 第三个项目拉伸 */align-self: stretch;}.item:last-child {/* 和基线对齐 *//* 所有项目基线对齐才会有效果 */align-self: baseline;}
</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body>

设置单个项目的排列顺序

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;}.item {width: 100px;height: 50px;background-color: lightcyan;}/* order数值越小顺序越靠前 ,默认为0，按照书写顺序*/.item:first-child {order: 2;}.item:nth-child(2) {order: -1;}.item:last-child {order: 0;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

单个项目的放大因子

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;}.item {width: 50px;height: 50px;background-color: lightcyan;}/* 默认值为0 */放大比列计算方法/* 1.计算出需要分配的主轴上剩余空间：300 - (50*3) *//* 2.计算放大因子：(0 + 1 + 2) = 3 *//* 将剩余空间150px分成三等分 150 / 3 *//* 第一个：50  + (0 * 50) = 50第二个：50 + (1 * 50) = 100第三个：50 + (2 * 50) = 150 */.item:first-child {flex-grow: 0;}.item:nth-child(2) {flex-grow: 1;}.item:last-child {flex-grow: 2;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

单个项目的收缩因子

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;/* flex-wrap: wrap; */}.item {width: 150px;height: 50px;background-color: lightcyan;}.item:first-child {flex-shrink: 0;}.item:nth-child(2) {flex-shrink: 1;}.item:last-child {flex-shrink: 2;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body><style>.container {width: 300px;height: 200px;background-color: pink;display: flex;/* flex-wrap: wrap; */}.item {width: 150px;height: 50px;background-color: lightcyan;}.item:first-child {flex-shrink: 0;}.item:nth-child(2) {flex-shrink: 1;}.item:last-child {flex-shrink: 2;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

设置项目在主轴上的计算基准尺寸

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;flex-wrap: wrap;}.item {width: 50px;height: 50px;background-color: lightcyan;/* 默认 *//* flex-basis: auto; *//* flex-basis设置的值会覆盖掉原始项目的值 */flex-basis: 80px;/* min-width的值会覆盖掉flex-basis的值 */min-width: 90px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/15351.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法随想录第十三天打卡|239. 滑动窗口最大值，347.前 K 个高频元素

算法随想录第十三天打卡|239. 滑动窗口最大值，347.前 K 个高频元素

239. 滑动窗口最大值 &#xff08;一刷至少需要理解思路&#xff09; 之前讲的都是栈的应用&#xff0c;这次该是队列的应用了。 本题算比较有难度的&#xff0c;需要自己去构造单调队列&#xff0c;建议先看视频来理解。 题目链接/文章讲解/视频讲解&#xff1a;代码随想录 c…
阅读更多...
使用VCPKG编译并使用Qt5

使用VCPKG编译并使用Qt5

一、背景 Qt就不介绍了。VCPKG可以看这里VCPKG资料记录_vcpkg boost 多久-CSDN博客 为什么搞Qt5而不是Qt6&#xff1f;因为Qt5比较稳定吧。而且我公司也是用的Qt5。 为什么要自己编译而不是去下载Qt5&#xff1f; 第一&#xff0c;因为Qt5在Qt在线安装版本只提供到Qt5.15.2&…
阅读更多...
【CTF Web】CTFShow web3 Writeup（SQL注入+PHP+UNION注入）

【CTF Web】CTFShow web3 Writeup（SQL注入+PHP+UNION注入）

web3 1 管理员被狠狠的教育了&#xff0c;所以决定好好修复一番。这次没问题了。 解法 注意到&#xff1a; <!-- flag in id 1000 -->但是拦截很多种字符。 if(preg_match("/or|\-|\\|\*|\<|\>|\!|x|hex|\/i",$id)){die("id error"); }使用…
阅读更多...
Linux驱动设备导论（1）

Linux驱动设备导论（1）

最近本人在学习Linux驱动&#xff0c;本系列教程是本人在一边学习&#xff0c;一边总结的系列教程&#xff0c;希望能够给很多刚学驱动小伙伴一些总结。 1.Linux设备分类 驱动针对的对象是存储器和外设&#xff0c;不是针对CPU&#xff0c;可以分为以下三大类&#xff1a; 1.…
阅读更多...
『Stable Diffusion 』AI绘画，不会写提示词怎么办？

『Stable Diffusion 』AI绘画，不会写提示词怎么办？

提示词 有没有想过&#xff0c;为什么你用 SD 生成的猫是长这样的。 而其他人可以生成这样的猫。 虽然生成的都是猫&#xff0c;但猫与猫之间还是有差距的。 如果你的提示词只是“cat”&#xff0c;那大概率就会出现本文第一张图的那个效果。而如果你加上一些形容词&#xff…
阅读更多...
C#应用的用户配置窗体方案 - 开源研究系列文章

C#应用的用户配置窗体方案 - 开源研究系列文章

这次继续整理以前的代码。本着软件模块化的原理&#xff0c;这次笔者对软件中的用户配置窗体进行剥离出来&#xff0c;单独的放在一个Dll类库里进行操作&#xff0c;这样在其它应用程序里也能够快速的复用该类库&#xff0c;达到了快速开发软件的效果。 笔者其它模块化应用的例…
阅读更多...
SQL面试题练习 —— 波峰波谷

SQL面试题练习 —— 波峰波谷

来源&#xff1a;字节今日头条 目录 1 题目2 建表语句3 题解 1 题目 有如下数据&#xff0c;记录每天每只股票的收盘价格&#xff0c;请查出每只股票的波峰和波谷的日期和价格&#xff1b; 波峰定义&#xff1a;股票价格高于前一天和后一天价格时为波峰 波谷定义&#xff1a;股…
阅读更多...
在linux下的ROS中下载超级终端Terminator ROS开发得力助手

在linux下的ROS中下载超级终端Terminator ROS开发得力助手

在一般我们运行机器人包时要打开三个终端来运行&#xff0c;关闭时还要一个一个关闭&#xff08;ctrlc&#xff09;过于麻烦 现在下载用了terminator后&#xff0c;就支持一键关闭多个终端了&#xff0c;很方便&#xff0c;具体操作如下&#xff1a; sudo apt install termin…
阅读更多...
JDBCTemplate介绍

JDBCTemplate介绍

Spring JDBC Spring框架对Spring的简单封装。提供一个JDBCTemplate对象简化JDBC开发 *步骤&#xff1a; 1、导入jar包 2、创建JDBCTemplate对象。依赖于数据源DataSource *JdbcTemplate templatenew JdbcTemplate(ds); 3、调用JdbcTemplate的方法来完成CRUD的操作 *update()&…
阅读更多...
程序员，绝不认输！

程序员，绝不认输！

程序员&#xff0c;绝不认输&#xff0c;这是一份对技术的执着&#xff0c;也是对挑战的无畏。在代码的世界里&#xff0c;每一个程序员都是一个探险家&#xff0c;他们面对的是无尽的未知和可能。 当遇到难题时&#xff0c;他们不会退缩&#xff0c;而是会深入研究&#xff0…
阅读更多...
JavaScript中null的类型

JavaScript中null的类型

在JavaScript中&#xff0c;null 并不是一个对象类型。实际上&#xff0c;null 是一个特殊的值&#xff0c;表示“无”或“空引用”。然而&#xff0c;由于历史原因和某些JavaScript实现中的细节&#xff0c;关于null的类型可能会产生一些混淆。 当你使用 typeof 操作符来检查…
阅读更多...
中国企业出海，哪些业务需要负载均衡？

中国企业出海，哪些业务需要负载均衡？

国内企业出海的进程正在加速。中国的出海企业剑指跨境电商、社交、游戏、短剧等市场&#xff0c;其中尤其以跨境电商的数据最为突出。据官方数据&#xff0c;2023年我国跨境电商进出口总额达到2.38万亿元&#xff0c;比2016年增长近50倍&#xff0c;占货物贸易总规模的5.7%。 …
阅读更多...
2024-5-9-从0到1手写配置中心Config之@ConfigurationProperties热更新

2024-5-9-从0到1手写配置中心Config之@ConfigurationProperties热更新

在PropertySourcesProcessor中&#xff0c;需要通过http从config-server获取配置。 使用ConfigMeta包装服务信息 在MidnightConfigService接口中添加默认实现类 继承MidnightRepositoryChangeListener接口&#xff1b;获取默认的MidnightRepository&#xff1b;创建MidnightCo…
阅读更多...
vue3 组件间通信

vue3 组件间通信

父组件-->子组件 传递数据 父组件通过绑定的属性 :customProperty 传给子组件&#xff0c;子组件通过 defineProps 接收数据 <!-- 父组件&#xff08;ParentComponent.vue&#xff09; --><template><div><ChildComponent :message"parentMess…
阅读更多...
开发“校园帮”小程序：从构思到上线的完整指南

开发“校园帮”小程序：从构思到上线的完整指南

目录 开发“校园帮”小程序&#xff1a;从构思到上线的完整指南1. 需求分析和规划确定目标用户功能需求竞争分析技术可行性 2. 项目计划时间规划团队分工预算 3. 原型设计线框图用户流程图UI设计 4. 技术选型开发工具技术栈 5. 开发设置开发环境前端开发后端开发接口联调 6. 测…
阅读更多...
xcode配置快速打开终端命令行工具教程

xcode配置快速打开终端命令行工具教程

以往我们使用idea编辑器或者vscode编辑器的时候&#xff0c;我们可以快速的在编辑器下面打开终端进行相关的操作&#xff0c;但是在xcode里面却没有这么方便的功能按钮&#xff0c;真的不是很习惯&#xff0c;所以这次就来给xcode配置这么一个方便的功能。 idea的Terminal 这…
阅读更多...
chris csp练习

chris csp练习

n个球放入m个盒子中&#xff0c;有多少种放法 #include <iostream> #include <algorithm> using namespace std;int n, m, ans 2e8, dxy[4][2] { {0, 1}, {1, 0}, {0, -1}, {-1, 0} }; char c[110][110]; bool a[110][110]; int h 1, t 0, q1[11000], q2[1100…
阅读更多...
qt 操作相机笔记

qt 操作相机笔记

目录 查看相机个数 查看相机个数 配置文件&#xff1a; QT multimedia #include <QCameraInfo> #include <QDebug>void listCameras() {QList<QCameraInfo> cameras QCameraInfo::availableCameras();foreach (const QCameraInfo &cameraInfo, cam…
阅读更多...
2024年蓝桥杯Web开发【大赛大纲】15届

2024年蓝桥杯Web开发【大赛大纲】15届

一、 组别 Web应用开发分为&#xff1a;大学组和职业院校组。 每位选手只能申请参加其中一个组别的竞赛。各个组别单独评奖。 研究生和本科生只能报大学组。 其它高职高专院校可自行选择报任意组别。 二. 竞赛赛程 省赛时长&#xff1a;4小时。 决赛时长&#xff1a;4小…
阅读更多...
H3CNE-5-IP子网划分（二）

H3CNE-5-IP子网划分（二）

可用主机地址个数&#xff1a; 2^n-2 &#xff08;n为主机位&#xff09; 主机位全0 子网地址 192.168.1.0 255.255.255.0 192.168.1.128 255.255.255.128 172.16.2.192 255.255.255.224 主机位全1 广播地址 192.168.1.255 255.255.255.0 192.168.1.127 255.255.255.1…
阅读更多...
最新文章

Copyright @ 2022~2023