css flex 布局的优点:flex 布局使用方便，根据 flex 规则很容易达到一定的布局效果。css flex 布局的缺点：浏览器兼容性差，只能兼容 ie9 及以上。

1. 什么是 flex 布局？

官方声明：Flex 是 Flexible Box 的缩写，意思是 “灵活布局”，用于为 Box 模型提供最大的灵活性。任何容器都可以指定为灵活布局。

民间说法:flex 是一种布局，类似于 block、inline-block 等。

Flex 是一种布局方法，用于确保页面需要适应不同的屏幕大小和设备类型时，元素具有适当的行为。

flex Box 模块旨在提供一种更有效的方法来制作、调整和分发容器中的项目布局 (基于一维)，即使它们的大小未知或动态。

优点：使用方便，根据 flex 规则很容易达到一定的布局效果。

缺点：浏览器兼容性比较差，只能兼容 ie9 及以上；

2.flex 中涉及的概念

Flex 布局的主要思想是使容器能够改变其宽度、高度 (甚至顺序)，并以最佳方式填充可用空间 (主要是为了适应所有类型的显示设备和屏幕大小)。Flex 容器扩展子项目 (伸缩项目) 以填充可用空间，或者收缩子项目以防止容器溢出。

flex 的基本功能是让布局更简单，比如 “垂直居中” 等等。当然，还有更多。要搞清楚 Flex 的功能，首先要了解一些概念。

具有灵活布局的元素被称为灵活容器，或简称为 “容器”。它的所有子元素自动成为容器成员，这被称为弹性项，或简称为 “项”。

默认情况下，容器有两个轴：水平主轴和垂直横轴。主轴的起始位置 (与机架的交点) 称为主起点，终点位置称为主终点；。横轴的起始位置称为十字起点，结束位置称为十字终点。默认情况下，项目沿主轴排列。单个项目占用的主轴空间称为主尺寸，占用的横轴空间称为十字尺寸。只要记住 “容器”、“物品”、“主轴 (横轴)” 和 “横轴 (纵轴)” 的含义和方向就行了。

3、容器的属性

3.1 弯曲方向

伸缩方向决定了主轴的方向 (即物品的排列方向)。它有四个可能的值：行 (默认值): 主轴是水平的，起点在容器的左端。 row-reverse: 主轴水平，起点在容器右端。-4 列：主轴垂直，起点在容器上边缘。-5 柱 - 反转：主轴垂直，起点在容器下缘。

3.2 软包

默认情况下，容器中的所有项目都排成一行，flex-wrap 定义了如果一行不合适，如何换行。有三种可能的值:nowrap (默认): 不换行。 wrap: wrap，第一行在顶部。 wrap-reverse: wrap，第一行在底部。

3.3 柔性流

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简称，默认值是 row nowrap。

3.4 对齐 - 内容对齐 - 内容定义项目在主轴上的对齐。有五种可能的值:flex-start: 与主轴的起始位置对齐，即从主轴的起始位置开始排列。如果使用伸缩方向属性来更改主轴的方向，项目的排列也会发生变化。

。容器 {display:flex；弯曲方向：行；内容:flex-start；} 12345

。容器 {display:flex；弯曲方向：行反转；内容:flex-start；} 12345 flex-end: 与主轴的末端位置对齐，即从主轴的末端位置开始排列。和 flex-start 一样，也和 flex-direction 有关。

。容器 {display:flex；弯曲方向：行；调整内容：灵活结束；} 12345

中心：中心

。容器 {display:flex；弯曲方向：行；内容：居中；} 12345

间距：如果有两个以上的项目，容器主轴的开始和结束位置分别为一，其他项目均匀排列，项目之间的间隔相等。排列顺序也与伸缩方向有关。如果只有两项，每边一项。如果只有一个项目，它将只排列在容器主轴的开始 141 空间 - 周围：每一个项目的两边之间的间隔相等。因此，项目之间的间隔是项目和边框之间的间隔的两倍。排列顺序也与伸缩方向有关。如果只有一项，则安排在中间。

3.5 对齐项目属性

align-items 属性定义项目在横轴 (纵轴) 上的对齐方式。可以取五个值。具体的对齐方式和横轴的方向有关，假设横轴是从上到下的。Flex-start: 横轴起点对齐。 flex-end: 横轴的端点对齐。中心：横轴的中点对齐。基线：项目第一行文本的基线对齐方式。 stretch (默认值): 如果项目的高度未设置或设置为 auto，它将占据整个容器的高度。

3.6 对齐 - 内容属性

对齐内容属性定义多轴 (多行) 的对齐方式。如果项目只有一个轴 (一条线)，此属性无效。如果弹性方向的值为列，则此属性定义多列的对齐方式。如果该项只有一列，则该属性不能为左或右。拉伸 (默认值): 多条线占据整个横轴。 flex-start: 与横轴的起点对齐。 flex-end: 与横轴的端点对齐。中心：与横轴的中点对齐。间距：与横轴两端对齐，轴间距均匀分布。空间环绕：每个轴两侧的间隔相等。因此，轴之间的间隔是轴和框架之间的间隔的两倍。

4. 项目的属性

4.1 订单属性

。项目 {订单:& ltinteger>。；} 123order 属性定义项目的顺序。值越小，排名越高，默认值为 0。

4.2 弹性增长属性

。项目 {flex-grow:& lt；number>。；} 1234flex-grow 属性定义项目的放大倍数，默认值为 0。如果所有项目的伸缩值相同，则主轴上的宽度以项目宽度为最小值均匀分布。如果没有为项目设置宽度，所有项目将平均分配主轴上的剩余宽度 (额外空间)。如果项目的伸缩值不同，则是根据相应的比例分配主轴上的剩余宽度 (额外空间)。按项目设置的宽度是最小值。如果项目设置为最大宽度，则扩大的宽度不会超过该值。

4.3 伸缩属性

flex-shrink 属性定义了项目的缩减比例，默认值为 1，即如果空间不足，项目将被缩减。

。项目 {flex-shrink: number；} 123 如果所有项目的 flex-shrink 属性为 1，则当空间不足时，它们将被同等地缩小。如果一个项目的 flex-shrink 属性为 0，而所有其他项目为 1，则前者在空间不足时不会收缩。如果容器容器设置的 flex-wrap 没有足够的空间，如果超出，它将自动换行。所以此时设置 flex-shrink 不起作用。负值对此属性无效。

4.4 弹性基础属性

flex-basis 属性定义了在分配多余空间之前项目占用的主要大小。浏览器根据这个属性计算主轴是否有多余的空间。它的默认值是 auto，即项目的原始大小。

。项目 {flex-basis: 长度。| 自动；} 123 可以设置为与 width 或 height 属性相同的值 (例如 350px)，项目会占用固定的空间。

4.5 弹性属性

flex 属性是 flex - 增长、flex - 收缩和 flex-basis 的缩写，默认值为 0 1 auto。最后两个属性是可选的。

。项目 {flex:none |[& lt；' 灵活发展 & # 39；>。& lt' 伸缩收缩。>。？| | & lt' 弹性基础 & # 39；>。]} 123 此属性有两个快捷方式值：自动 (1 1 自动) 和无 (0 0 自动)。建议先使用这个属性，而不是分别编写三个单独的属性，因为浏览器会计算相关的值。如果伸缩基数之和大于父代的宽度，子代将被压缩，最后选择伸缩来进行压缩计算

加权值 = son1+son2+...+sonn；

那么压缩后的计算公式是

压缩宽度 w =(子元素弹性基值 *(弹性收缩)/ 加权值)* 溢出值

如果弹性基础的总和小于父宽度，剩余宽度将基于弹性增长值的总和；

扩展宽度 w =(子元素伸缩增长值 / 所有子元素伸缩增长之和)* 残值

4.6 自对齐属性

自对齐属性允许单个项目具有不同于其他项目的对齐方式，并且可以覆盖对齐项目属性。默认值为 auto，这意味着继承父元素的 align-items 属性。如果没有父元素，就相当于拉伸。

。项目 {align-self:auto | flex-start | flex-end | center | baseline | stretch；} 有关编程的更多知识，请访问：编程教学！！这是 css 灵活布局的优点和缺点的细节，等等