布局的传统解决方案，基于盒状模型 ，依赖 display 属性 + position 属性 + float 属性。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写，意为"伸缩盒模型"或者"弹性盒模型"，用来为盒状模型提供最大的灵活性。
1. 伸缩容器和伸缩项目
1.1 概念定义
伸缩容器： 给元素设设置 display: flex 或者 display:inline-flex，该元素就变为伸缩容器。
伸缩项目： 伸缩容器的子元素就是伸缩项目。
1.2 伸缩项目的特点
-
一个元素既可以是容器也可以是项目
-
没有脱离文档流，可以水平排列(沿着主轴方向，主轴方向默认水平)，也没有空白
-
不管原来显示模式是什么，变成伸缩项目就具备伸缩项目的特点
-
伸缩项目权重等级比浮动高，小于定位。也就是同时设置伸缩和浮动，显示伸缩，同时设置伸缩和定位，显示定位
-
伸缩项目具有独立的显示模式
- 默认宽高被内容撑开，不存在外边距的塌陷合并(区别块元素)
- 可以完美设置宽高、内外边距(区别于行内元素)
- 不会被父元素作为文本(区别于行内块元素)
-
伸缩项目具有伸缩性
容器没有特点，重点是项目
2. 设置主轴方向和换行方式
主轴main axis： 伸缩项目会沿着主轴进行排列，第一个伸缩项目在主轴起点处，然后依次排列
侧轴cross axis： 侧轴永远与主轴保持垂直，修改主轴方向，侧轴也随之改变
2.1 设置主轴方向
给伸缩容器设置属性flex-direction，可以改变主轴方向
| 值 | 语义 | |
|---|---|---|
| row | 默认水平从左到右 |  |
| row-reverse | 水平从右到左 |  |
| column | 竖直从上到下 |  |
| column-reverse | 竖直从下到上 |  |
2.2 设置换行方式
给伸缩容器设置属性flex-wrap，可以改变伸缩项目在主轴上的换行方式
| 值 | 语义 | |
|---|---|---|
| nowrap | 不换行默认 |  |
| wrap | 自动换行 |  |
| wrap-reverse | 自动换行且翻转 |  |
2.3 同时设置主轴方向和换行方式
给伸缩容器设置属性flex-flow可以同时设置主轴方向和换行方式，相当于复合属性，也可以写一个值
3. 在主轴上的对齐方式
给伸缩容器设置 justify-content , 该属性的值如下：
| 值 | 语义 | |
|---|---|---|
| flex-start | 主轴起点对齐 |  |
| flex-end | 主轴终点对齐 |  |
| center | 居中对齐 |  |
| space-between | 两端对齐 |  |
| space-around | 两端的间距是中间间距的一半 |  |
| space-evenly | 两端的间距与中间间距相同 |  |
4. 在侧轴上的对齐方式
4.1 一条主轴线（伸缩项目在主轴上不换行）
给伸缩容器设置 align-items，属性值如下：
| 值 | 语义 | |
|---|---|---|
| stretch | 拉伸，默认值。 如果伸缩项目不设置侧轴上的长度，会拉伸至于伸缩容器侧轴长度一致。 |  |
| flex-start | 侧轴起点对齐 |  |
| flex-end | 侧轴终点对齐 |  |
| center | 居中对齐 |  |
| baseline | 基线对齐 |  |
4.2 多条主轴线 （伸缩项目在主轴上发生换行）
给伸缩容器设置 align-content，属性值如下：
| 值 | 语义 | |
|---|---|---|
| stretch | 拉伸，默认值。 如果伸缩项目不设置侧轴上的长度，会拉伸至于伸缩容器侧轴长度一致。 |  |
| flex-start | 侧轴起点对齐 |  |
| flex-end | 侧轴终点对齐 |  |
| center | 居中对齐 |  |
| space-between | 两端对齐 |  |
| space-around | 两端的间距是中间间距的一半 |  |
| space-evenly | 两端的间距与中间间距相同 |  |
5. 伸缩项目的伸缩性
5.1 伸缩项目在主轴上的长度 flex-basis
- 该属性设置的是伸缩项目在主轴上的长度，优先级高于 width 或者 height。
- 该属性默认值 auto，默认，伸缩项目在主轴上的长度按照 width 或者 height 的设置。
5.2 扩展比率 flex-grow
伸缩项目扩展的前提：
- 伸缩容器在主轴方向上有富余空间
- 伸缩项目的扩展比率不能是 0
伸缩项目扩展的规则：
各伸缩项目按照各自的扩展比率，瓜分伸缩容器的富余空间
5.3 收缩比率 flex-shrink
伸缩项目收缩的前提：
- 伸缩容器在主轴上的长度不够（小于伸缩项目在主轴上的长度和）
- 收缩比率不能是 0
- 伸缩项目在主轴上不能自动换行
伸缩项目收缩的规则：
既要考虑收缩比率，也要考虑伸缩项目原本在主轴上的长度
5.4 flex 复合属性
csss
flex: 扩展比率 收缩比率 basis;
css
/* 简写 */
flex: 1; /* flex:1 1 0 */
flex: auto; /* flex: 1 1 auto*/
flex: none; /* flex:0 0 auto */
flex: 0 auto; /*flex:0 1 auto*/6. 伸缩项目排序
给伸缩项目设置属性 order 属性的值是纯数字，可以是负值，值越大，排序越靠后
7. 单独设置伸缩项目在侧轴上的对齐方式
给伸缩项目设置 align-self，属性值：
| 值 | 语义 |
|---|---|
| auto | 默认值，按照伸缩容器中 align-items 的设置 |
| stretch | 拉伸 |
| flex-start | 侧轴起点对齐 |
| flex-end | 侧轴终点对齐 |
| center | 居中对齐 |
| baseline | 基线对齐 |
8. 总结
8.1 容器属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| flex-direction（主轴排列方向） | row | 默认值，主轴为水平，起点在左端，从左往右排列 |
| row-reverse | 主轴为水平，起点在右端，从右往左排列 | |
| column | 主轴为垂直方向，起点在上边，从上往下排列 | |
| colum-reverse | 主轴为垂直方向，起点在下边，从下往上排列 | |
| flex-wrap（项目在容器中一行无法显示的时候如何换行） | nowrap | 默认值，不换行/列 |
| wrap | 主轴是水平时，从上到下换行；主轴为垂直时。从左到右换行 | |
| wrap-reverse | 主轴是水平时，从下到上换行；主轴为垂直时。从右往左换行 | |
| justify-content（项目在容器中主轴上对齐方式） | flex-start | 默认值，左对齐 |
| flex-end | 右对齐 | |
| center | 居中对齐 | |
| space-between | 两端对齐 | |
| space-around | 每个项目两侧的间距相等 | |
| align-items（项目在侧轴上对齐方式） | flex-start | 侧轴起点对齐 |
| flex-end | 侧轴终点对齐 | |
| center | 侧轴中点对齐 | |
| baseline | 伸缩项目的第一行文字的基线对齐 | |
| stretch | 默认值，如果伸缩项目未设置高度或设为auto，将占满整个容器的高度 | |
| align-content（侧轴方向上有多根轴线的对齐方式，如果只有一根不起作用） | flex-start | 与侧轴的起点对齐 |
| flex-end | 与侧轴的终点对齐 | |
| center | 与侧轴的中点对齐 | |
| space-between | 与侧轴两端对齐，轴线之间的间隔平均分布 | |
| space-around | 每根轴线两侧的间隔都相等 | |
| stretch | 默认值，轴线占满整个侧轴 |
8.2 项目属性
| 属性 | 值 | 说明 |
|---|---|---|
| order（定义项目的排列顺序） | 数字 | 数值越小，排列越靠前，默认为0 |
| flex-grow（项目放大比例） | 数字 | 默认为0，即如果存在剩余空间，也不放大。 |
| flex-shrink（项目的缩小比例） | 数字 | 默认为1，即如果空间不足，该项目将缩小。 |
| flex-basis（在分配多余空间之前，伸缩项目占据的主轴空间） | 长度/auto | 默认值为auto，即项目的本来大小。 |
| align-self（当前项目可以和其他项目拥有不一样的对齐方式，覆盖align-items属性） | flex-start | 侧轴起点对齐 |
| flex-end | 侧轴终点对齐 | |
| center | 侧轴中点对齐 | |
| baseline | 伸缩项目的第一行文字的基线对齐 | |
| stretch | 默认值，如果伸缩项目未设置高度或设为auto，将占满整个容器的高度 |