CSS弹性盒子(display:flex)使用技巧

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;，点击后面的小图标，接下来就可以随意调整了。
  

• 调成想要的样子，复制属性粘贴到代码中即可。