共计 1155 个字符，预计需要花费 3 分钟才能阅读完成。
flex 布局原理
全称 flexible box，弹性布局。
如何开启：为元素增加 display: flex。
开启 flex 布局的元素，称为 flex 容器（flex container），其子元素成为容器成员，称为 flex 我的项目。
flex 布局原理：通过给父盒子增加 display: flex，来管制盒子的地位和排列形式。
flex 布局父盒子常见属性
flex-direction
设置主轴方向
| 属性值 | 含意 |
|---|---|
| row | 默认值，从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content
设置主轴子元素排列形式
| 属性值 | 含意 |
|---|---|
| flex-start | 默认值，从头开始 |
| flex-end | 从尾部开始 |
| center | 居中 |
| space-around | 平分残余空间 |
| space-between | 两侧子元素贴边，再平分残余空间 |
flex-wrap
设置子元素是否换行
默认不换行，若子盒子宽度和大于父盒子，则会膨胀！
| 属性值 | 含意 |
|---|---|
| wrap | 换行 |
| nowrap | 默认值，不换行 |
align-items
设置子元素在侧轴上的排列形式（子元素单行）
| 属性值 | 含意 |
|---|---|
| flex-start | 侧轴头部开始 |
| flex-end | 侧轴尾部开始 |
| center | 侧轴居中 |
| stretch | 默认值，拉伸（拉满整个侧轴），若子元素设置了高度则生效 |
align-content
设置子元素在侧轴上的排列形式（子元素多行）
| 属性值 | 含意 |
|---|---|
| flex-start | 默认值，侧轴头部开始 |
| flex-end | 侧轴尾部开始 |
| center | 侧轴居中 |
| stretch | 子元素高度平分父元素高度（须要子元素没有设置高度） |
| space-around | 平分侧轴空间 |
| space-between | 侧轴两侧贴边再平分残余空间 |
flex-flow
flex-direction 与 flex-wrap 属性的复合写法
son {flex-flow: row wrap;}flex 布局子盒子常见属性
flex
flex 属性其实是 flex-grow、flex-shrink、flex-basis 三个属性的简写。
flex-grow 属性值为一个数字，用于设置弹性盒子的扩大比例，即盒子占残余空间的份数，默认为 0。常见的 flex: 1 是 flex-grow 为 1。
flex-shrink 属性值为一个数字，用于设置盒子的膨胀比例，当子盒子的宽度之和大于父盒子时才会膨胀。
flex-basis 用于设置子盒子的初始长度。
span {flex: 1;}
.son {flex: 0 0 33.33%;}align-self
独自设置某个子盒子在侧轴的排列形式，它会笼罩 align-items 属性。默认值为 auto，示意继承父盒子的 align-items 属性，其余属性值与 align-items 雷同。
order
定义子盒子在 主轴 上的排列程序。默认值为 0，值越小越靠前，能够为正数。
.son {order: -3;}