2022年重学Flex布局

一、引言

---

上周面试了一名从某某培训机构毕业出来的小伙伴，应聘前端工程师的职位，简历上写着精通html5+css3，可手写轮播图、导航栏等等。第一印象还不错，面试过程中就问了几个简单的技术知识，一个是如何让文字垂直居中？一个是写一个类似知乎头部的布局样式？就是想考验下小伙伴对flex弹性布局相关的基础知识，面试结果不是很满意（还问了一些关于简历中提到的js,vue相关的基础知识）。回想自己刚入门div+css布局的时候，垂直居中问题一直困扰着我，贼难搞高，自从与flex邂逅，妈呀，真香...趁着元旦放假，总结下对flex弹性布局的理解，加深记忆。

二、Flex布局是什么？

---

Flex布局是W3C在2009年提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

Flex布局更适合用来做一维布局(一行或者一列的布局),用起来贼爽，一直用一直爽。

三、玩转Flex布局

---

（一）初识“容器”和“项目”

从上图可以看出来，只要给元素设置了display:flex,该元素就变成一个“容器”,而该元素的子元素则变成了“项目”。

（二）初识“主轴”和“交叉轴”

主轴和交叉轴，可以简单理解为水平和竖直两个方向。默认情况下主轴对应的是水平方向，交叉轴对应的是竖直方向，但是这个对应关系是可以修改的（通过flex-direction属性），很多情况下我们也确实要修改，接下来看看“容器”都有哪些神奇的属性。

（三）容器的属性

容器一共有6个CSS属性:

1. flex-direction (设置主轴方向)
2. flex-wrap (设置换行方式)
3. flex-flow (flex-direction与flex-wrap的缩写)
4. justify-content (设置子元素在主轴方向上的对齐方式)
5. align-items (设置子元素在交叉轴上的对齐方式)
6. align-content (设置子元素在交叉轴上多行的对齐方式，注意：只有多行子元素才生效)

下面我们来具体每个属性都具有哪些取值和含义

1.flex-direction 设置主轴的方向

flex-direction: row(默认-主轴沿着水平方向从左向右)
flex-direction: column（主轴沿着垂直方向从上往下）
flex-direction: row-reverse(主轴沿着水平方向从右向左)
flex-direction: column-reverse（主轴沿着垂直方向从下往上）

2.flex-wrap 如果一行放不下，设置换行的方式

flex-wrap: nowrap(默认-不换行)
flex-wrap: wrap(允许换行)
flex-wrap: wrap-reverse(允许逆向换行-逆向换行的意思就是第一行在下方，从下往上排列)

3.flex-flow 是flex-direction与flex-wrap的缩写 默认值：row nowrap

flex-flow: row nowrap

4.justify-content 子元素在主轴方向上的对齐方式

justify-content: flex-start (子元素沿着主轴开始方向对齐)
justify-content: flex-end (子元素沿着主轴终点方向对齐)
justify-content: center (子元素在主轴方向上水平居中)
justify-content: space-between (子元素在主轴方向上两端对齐，项目之间间隔相等)
justify-content: space-around (子元素在主轴方向上均匀排列每个元素，每个元素周围分配相同的空间)

5.align-items 子元素在交叉轴上的对齐方式

align-items: flex-start (子元素在交叉轴上起点方向对齐)
align-items: flex-end (子元素在交叉轴上终点方向对齐)
align-items: center (子元素在交叉轴上居中对齐)
align-items: baseline (子元素在交叉轴方向上以文字基线对齐)
align-items: stretch (这个属性是默认的，如果项目未设置高度或者设为 auto，将占满整个容器的高度)

6.align-content 子元素在交叉轴上多行的对齐方式，注意：只有多行子元素才生效

align-content: flex-start (起始端对齐)
align-content: flex-end (末尾段对齐)
align-content: center (居中对齐)
align-content: space-between (等间距均匀分布)
align-content: space-around (等边距均匀分布)
align-content: stretch (拉伸对齐)

（四）项目的属性

项目一共有6个CSS属性:

1. order (设置项目的排列顺序，数值越小越靠前，可以设负值，默认为0)
2. flex-grow (定义项目的放大比例，剩余空间如何分配，默认为0)
3. flex-shrink (定义项目的缩小比例，如果空间不足，项目将缩小，默认为1)
4. flex-basis (定义项目的初始长度)
5. flex (flex-grow,flex-shrink,flex-basis的缩写)
6. align-self (设置该项目的对齐方式)

​

1.order 设置项目的排列顺序，数值越小越靠前，可以设负值，默认为0

order: <integer> 整型

2.flex-grow 子容器弹性伸展的比例，简单理解，就是把剩余的空间按比例分配给子容器

flex-grow: <number>  默认值为0

3.flex-shrink 子容器弹性收缩的比例。简单理解，就是当你子容器超出的部分，会按照对应的比例给子容器减去对应的值,如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-grow: <number>

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

flex-grow: <length> |auto

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

flex: 0 1 auto

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

align-self: auto (继承父元素的align-items属性)
align-self: flex-start (起始端对齐)
align-self: flex-end (末尾端对齐)
align-self: center (居中对齐)
align-self: baseline (基线对齐)
align-self: stretch (拉伸对齐)

四、总结

---

通过系统性整理了一遍关于flex布局相关的属性，收获挺多，flex布局并不复杂，用起来贼爽，方便日后自己快速定位到需要的属性的同时，也希望能帮助到“远方”的你。如有错误或不严谨的地方，请务必给予指正！