1. 弹性盒模型简介
Flexible Box （伸缩盒模型，又称：弹性盒子）是 W3C 在2009年提出的一种新的盒子模型。
通过display:flex;可以开启伸缩盒模型，将元素设置为伸缩容器，可以轻松的对元素进行布局。
2. 主轴与侧轴
开启display:flex;的元素内的子元素会沿着主轴排列，主轴默认水平方向，从左到右，与主轴垂直的为侧轴，默认从上到下。
下表为控制主轴与侧轴对齐方式的属性，是不是很多？不好理解又难记？接下来教各位一个完全不用记忆甚至不用理解这些属性的技巧。
| 说明 | 属性名 | 可选值 |
|---|---|---|
| 主轴方向 | flex-direction | row ：主轴方向水平从左到右 —— 默认值 row-reverse ：主轴方向水平从右到左。 column ：主轴方向垂直从上到下。 column-reverse ：主轴方向垂直从下到上。 |
| 主轴换行方式 | flex-wrap | nowrap ：默认值，不换行。 wrap ：自动换行，伸缩容器不够自动换行。 wrap-reverse ：反向换行。 |
| 主轴对齐方式 | justify-content | flex-start ：主轴起点对齐。—— 默认值 flex-end ：主轴终点对齐。 center ：居中对齐 space-between ：均匀分布，两端对齐。 space-around ：均匀分布，两端距离是中间距离的一半。 space-evenly ：均匀分布，两端距离与中间距离一致。 |
| 侧轴对齐方式 单行 | align-items | flex-start ：侧轴的起点对齐。 flex-end ：侧轴的终点对齐。 center ：侧轴的中点对齐。 baseline : 伸缩项目的第一行文字的基线对齐。 stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。（默认值） |
| 侧轴对齐方式 多行 | align-content | flex-start ：与侧轴的起点对齐。 flex-end ：与侧轴的终点对齐。 center ：与侧轴的中点对齐。 space-between ：与侧轴两端对齐，中间平均分布。 space-around ：伸缩项目间的距离相等，比距边缘大一倍。 space-evenly : 在侧轴上完全平分。 stretch ：占满整个侧轴。（默认值） |
3. 使用技巧
-
先写
display:flex;属性，然后在浏览器预览，打开发者调试工具。在元素中找到开启display:flex;的元素。
-
点击元素，在样式中找到
display:flex;，点击后面的小图标，接下来就可以随意调整了。
-
调成想要的样子，复制属性粘贴到代码中即可。
