Flex 布局详解

news2024/11/25 13:43:48

 Flex布局的概念与基础概况

Flex布局又称弹性布局。它使用Flex Box使得容器有了弹性，更加适应不同的设备的不同高度，而不必依赖于传统的块状布局和浮动布局。它是css3中新增的规范，目前主流的浏览器都已支持。但flex不支持IE9及以下版本。

Flex布局中主要包含了以下五个概念

1、弹性容器（flex container）：采用flex布局的外层容器，简称“容器”。

2、弹性项（flex item）：容器中的子元素（不包含孙子等后代元素），简称“项目”。

3、主轴（main axis）：弹性容器的水平或垂直方向。

4、交叉轴（cross axis）：与主轴垂直方向。

5、对齐方式（align）：弹性项在弹性容器中的对齐方式。

补充：主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex 容器：

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素（a、span等），你可以使用 inline-flex。

注：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

 有下面六种属性可以设置在容器上，它们分别是：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

1.flex-direction属性:flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

默认值：row，主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿

2. flex-wrap: 决定容器内项目是否可换行

默认情况下，项目都排在主轴线上，使用 flex-wrap 可实现项目的换行。

默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整(变形)而并不会挤到下一行。

 wrap：项目主轴总尺寸超出容器时换行，第一行在上方

wrap-reverse：换行，第一行在下方

3.flex-flow:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，

默认值为row nowrap

4. justify-content：定义了项目在主轴的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

PS:非常好用，类似自动化编排

建立在主轴为水平方向时测试，即 flex-direction: row

  • 默认值: flex-start 左对齐

  • flex-end：右对齐

  • center：居中

  • space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

  • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。(边0.5，间隔1)

ps：justify-content: space-evenly   （父元素剩余空间均匀分布在子元素与子元素之间和子元素与父元素边框之间）

5. align-items: 定义了项目在交叉轴上的对齐方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

6、align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

这个这样理解：

当你 flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。

当你 flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。

align-content属性与align-items属性作用类似，其中区别是align-items作用于flex容器中子项目不换行的情况，而align-content则是作用于flex容器换行的情况。

Flex 项目属性：

有六种属性可运用在 item 项目上：

order
flex-basis
flex-grow
flex-shrink
flex
align-self

4.1 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}
 效果如下图所示：

 如果不给项目设置order值，默认值为0，那么项目的顺序按照结构顺序排列。

4.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}
效果如下图所示： 

 将剩余空间分为4份，给黄色的3份，给紫色的1份。

每个项目分配空间计算公式：

div0：不放大，即不被分配剩余空间

div2：3 / (3 + 1) * 剩余空间 = 3 / 4 * 剩余空间

div2：1 / (3 + 1) * 剩余空间 = 1 / 4 * 剩余空间

4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。

当子元素宽度和大于父元素宽度时，flex-shrink 将会按照一定的比例进行收缩，即将子元素宽度之和与父元素宽度的差值按照子元素flex-shrink值来分配给各个子元素，指定各个子元素收缩多少，每个子元素原本宽度减去按比例分配的值，其剩余值为收缩完的实际宽度。

.item {
  flex-shrink: <number>; /* default 1 */
}
flex-shrink之和大于或等于1
主轴长度为1000px，子元素溢出空间：(300 + 400 + 500) - 1000 = 200 px。

项目1 占 300px，项目2 占 400px，项目3 占 500px，各个项目的 flex-shrink 值分别为1，2，3，总权重为 300 * 1 + 400 * 2 + 500 * 3 = 2900px，则每个项目的权重分别为：

项目1：(300 * 1) / 2900 = 0.103448275862069
项目2：(400 * 2) / 2900 = 0.2758620689655172
项目3：(500 * 3) / 2900 = 0.5172413793103448
下面，计算每个项目分别缩小的空间：

项目1：200（溢出空间）* 0.103448275862069 = 20.6896551724138 px
项目2：200（溢出空间）* 0.2758620689655172 = 55.17241379310344 px
项目3：200（溢出空间）* 0.5172413793103448 = 103.448275862069 px
效果：

flex-shrink小于1
当所有项目的flex-shrink之和小于1，只收缩溢出空间的一部分。

假设项目1 为0.1，项目2为 0.2，项目3为 0.3，溢出200px，总收缩空间为：200px * (0.1 + 0.2 + 0.3) = 120px

每个项目的权重计算方式是不变的（和上面的一样），每个项目分别缩小：

项目1：120 * 0.1153846153846154 = 13.84615384615385 px
项目2：120 * 0.3076923076923077 = 36.92307692307692 px
项目3：120 * 0.5769230769230769 = 69.23076923076923 px


4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

效果如下所示：

 项目1，无论是吧width放在flex-basis上方还是下方都不起作用了，只要设置了flex-basis项目就占据主轴固定空间，width不起作用。

4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性
 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
 align-self属性有6个值，除了auto，其他都与align-items属性完全一致。

  

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

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

相关文章

uniapp 解决跨域的问题

uniapp 解决跨域的问题

uniapp 解决跨域的问题 我真的是个 沙雕 找对了解决办法 写错了地方 "h5" : {"devServer" : {"disableHostCheck" : true,"https": false,"proxy" : {"/app" : {"target" : "https://192.16…
阅读更多...
使用IntelliJ IDEA本地启动调试Flink流计算工程的2个异常解决

使用IntelliJ IDEA本地启动调试Flink流计算工程的2个异常解决

记录&#xff1a;471 场景&#xff1a;使用IntelliJ IDEA本地启动调试Flink流计算时&#xff0c;报错一&#xff1a;加载DataStream报错java.lang.ClassNotFoundException。报错二&#xff1a;No ExecutorFactory found to execute the application。 版本&#xff1a;JDK 1.…
阅读更多...
Windows中多线程的基础知识1——互斥对象

Windows中多线程的基础知识1——互斥对象

目录 1 多线程的基本概念1.1 进程一、程序和进程的概念二、进程组成三、进程地址空间 1.2 线程一、线程组成二、线程运行三、线程创建函数 1.3 多进程与多线程并发一、多进程并发二、多线程并发 2 线程同步2.1 一个经典的线程同步问题2.2 利用互斥对象实现线程同步一、创建互斥…
阅读更多...
模糊测试面面观 | 模糊测试是如何准确定位问题的？

模糊测试面面观 | 模糊测试是如何准确定位问题的？

​前几期我们介绍了常见的模糊测试工具、模糊测试的优势及异常发掘&#xff0c;本期我们就来聊一下模糊测试是如何准确定位问题的。我们知道模糊测试是一种通过向目标系统提供非预期的“坏数据”输入并监视异常结果来发现软件漏洞的方法&#xff0c;能否准确定位问题是模糊测试…
阅读更多...
Elasticsearch Head的使用

Elasticsearch Head的使用

目录 概述一、安装 Elasticsearch Head二、解压文件三、安装Elasticsearch Head依赖四、启动 Elasticsearch Head五、修改Elasticsearch Head启动端口号六、使用 Elasticsearch Head注意事项 概述 Elasticsearch Head 是一个用于管理和监控 Elasticsearch 集群的 Web 界面工具…
阅读更多...
Python Flask Web开发三：数据表的字段增加和删除

Python Flask Web开发三：数据表的字段增加和删除

前言 在实际的开发中&#xff0c;数据表中的字段的增加和删除是很正常的操作&#xff0c;在运营的不断提需求下&#xff0c;这个修改的频率是很高的&#xff0c;那么在flask中如何进行字段的增加和删除呢&#xff1f;下面我来给大家讲讲 一、创建迁移脚本 使用数据库迁移工具…
阅读更多...
从0开始学go第四天

从0开始学go第四天

模板继承 继承根模板&#xff0c;重新定义“块模板” 【Go Web开发系列教程】07-Go模板继承_哔哩哔哩_bilibili 解析模板时&#xff0c;base模板要在前 渲染模板时&#xff1a; 要用ExecuteTemplate&#xff0c;而不是Excute 模板补充&#xff1a;Go语言标准库之http/templ…
阅读更多...
免费在线行为验证，保护你的账号安全

免费在线行为验证，保护你的账号安全

前言 忘记繁琐的验证码吧&#xff01;免费在线行为验证服务&#xff0c;通过滑动图片、滑动拼图和文字点选等方式&#xff0c;确保只有真正的人类用户能够访问。 前端代码 <script src"https://cdn6.kgcaptcha.com/captcha.js"></script> <script&g…
阅读更多...
从0到1实现播放控制器

从0到1实现播放控制器

这系列文章主要讲诉如何从0到1使用QT实现带时间显示、滚动字幕等的自定义配置视频播放控制器。平时我们乘坐地铁经常看到各条线的播放控制器都大同小异。其实都是通过QT等界面开发软件来实现的。 在具体开发之前&#xff0c;需要明确我们需要做什么&#xff1f; 1. 开发一个可…
阅读更多...
Java中级面试题记录(三)

Java中级面试题记录(三)

1.职业规划&#xff1f; 2.每家公司离职原因&#xff1f; 3.SpringCloud用到了哪些组件&#xff1f; GateWayNacosOpenFeignSeataHystrix 4.PG和Mysql的区别&#xff1f; 5.两种数据库的存储区别&#xff1f; 6.MySQL索引了解的内容&#xff1f; 一口气搞定索引的所有知识…
阅读更多...
PCL入门（二）：初识点云数据

PCL入门（二）：初识点云数据

目录 1. 点云数据2. 对点云数据的简单操作3. 结果 1. 点云数据 在pcl里面&#xff0c;定义了很多点云数据类型&#xff0c;比如PointXYZ、PointXYZI、PointXYZRGBA等等&#xff0c;每一个都可以看做是点云的一个点的数据。而整个点云的数据类型被定义为PointCloud。 以pcl::P…
阅读更多...
19-springcloud(上)

19-springcloud(上)

一 微服务架构进化论 单体应用阶段 (夫妻摊位) 在互联网发展的初期&#xff0c;用户数量少&#xff0c;一般网站的流量也很少&#xff0c;但硬件成本较高。因此&#xff0c;一般的企业会将所有的功能都集成在一起开发一个单体应用&#xff0c;然后将该单体应用部署到一台服务器…
阅读更多...
Build阶段-Maven安装配置

Build阶段-Maven安装配置

构建Java项目的工具一般有两种选择&#xff0c;一个是Maven&#xff0c;一个是Gradle。 这里我们选择Maven作为项目的编译工具。 具体安装Maven流程不做阐述&#xff0c;但是需要确保配置好Maven仓库私服以及JDK编译版本
阅读更多...
财报解读：营收利润增长稳健，百果园产业链转型正在进行时？

财报解读：营收利润增长稳健，百果园产业链转型正在进行时？

百果园的精品水果之路越走越踏实。 近日&#xff0c;百果园发布了截至2023年6月30日止六个月的中期业绩报告。财报显示&#xff0c;2023年上半年&#xff0c;集团收入为62.94亿元人民币&#xff0c;同比增长6.4%&#xff1b;毛利为7.13亿元人民币&#xff0c;同比增长5.2%&…
阅读更多...
Python列表排序

Python列表排序

介绍一个关于列表排序的sort方法&#xff0c;看下面的案例&#xff1a; """ 列表的sort方法来对列表进行自定义排序 """# 准备列表 my_list [["a", 33], ["b", 55], ["c", 11]]# 排序&#xff0c;基于带名函数 …
阅读更多...
sklearn中的数据集使用

sklearn中的数据集使用

导库 from sklearn.datasets import load_iris 实现 # 加载数据集 iris load_iris() print(f查看数据集&#xff1a;{iris}) print(f查看数据集的特征&#xff1a;{iris.feature_names}) print(f查看数据集的标签&#xff1a;{iris.target_names}) print(f查看数据集的描述…
阅读更多...
【C++】atoi函数和itoa函数无废话极简概述

【C++】atoi函数和itoa函数无废话极简概述

atoi和itoa这两个函数头文件均为<stdlib.h> atoi atoi全称&#xff1a;array to int&#xff0c;可以把字符串转换为整型 int atoi(const char *nptr); 使用演示&#xff1a; #1 char str[5]; cin>>str; int aatoi(str);#2 int a; aatoi("123");//a…
阅读更多...
vue2中实现 TDesign 树形懒加载

vue2中实现 TDesign 树形懒加载

之前我有写过Element ui的树形懒加载 其主要是通过load函数来实现 而TDesign也是照虎画猫 他也是主要靠load 我们先来看一个基本的组件 <template><t-tree :data"items" :load"load" /> </template><script lang"jsx">…
阅读更多...
mysql忘记root密码如何解决？

mysql忘记root密码如何解决？

第一步&#xff1a;首先右键此电脑打开管理器&#xff0c;查看mysql是否运行 第二步&#xff1a;用管理员模式打开命令框 输入net stop mysql暂停mysql运行 net stop mysql 然后输入下面指令 mysql --console --skip-grant-tables --shared-memory 显示如下 第三步&…
阅读更多...
助力智能辅助识别，基于轻量级卷积神经网络mobilenet开发构建结直肠息肉识别系统

助力智能辅助识别，基于轻量级卷积神经网络mobilenet开发构建结直肠息肉识别系统

AI与医学领域数据的结合早已是一个热门的方向&#xff0c;基于深度学习技术来开发辅助智能识别和检测模型对于疾病的高效智能化诊断有着重要的指导意义&#xff0c;这里本文的主要思想就是想要基于轻量级的CNN模型来尝试开发构建息肉识别系统&#xff0c;后续项目中会需要基于此…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023