弹性盒子布局
伸缩容器与伸缩项目
伸缩容器： 开启了 flex 的元素就是伸缩容器。
给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。 一个元素可以同时是伸缩容器和伸缩项目。
伸缩项目：伸缩容器所有子元素自动成为伸缩项目。
只有伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代不是伸缩项目。
无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。
主轴与侧轴
主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边 是终点）。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边 是终点）。
主轴方向
属性名： flex-direction
常用值：
- row ：主轴方向水平从左到右 —— 默认值 flex-direction: row;
1. row-reverse ：主轴方向水平从右到左。 flex-direction: row-reverse;
2. column ：主轴方向垂直从上到下。 flex-direction: column;
3. column-reverse ：主轴方向垂直从下到上。 flex-direction: column-reverse;
主轴换行方式
属性名： flex-wrap
常用值:
- 默认值:flex-wrap: nowrap;
2. 换行：flex-wrap: wrap;
- 反向换行：flex-wrap: wrap-reverse;
flex-flow
flex-flow 是一个复合属性，复合了flex-direction 和 flex-wrap两个属性， 值没有顺序要求。
flex-flow: row wrap;
主轴对齐方式
属性名： justify-content
常用值：
- flex-start ：主轴起点对齐。—— 默认值 justify-content: flex-start;
- flex-end ：主轴终点对齐。 justify-content: flex-end;
- center ：居中对齐 justify-content: center;
4 space-between ：均匀分布，两端对齐（最常用） justify-content: space-between;
5 space-around ：均匀分布，两端距离是中间距离的一半。 ,项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍。 justify-content: space-around;
6 space-evenly ：均匀分布，两端距离与中间距离一致。justify-content: space-evenly;
侧轴对齐方式
一行的情况
属性值： align-items
常用值：
- flex-start ：侧轴的起点对齐。 align-items: flex-start;
- flex-end ：侧轴的终点对齐。 align-items: flex-end;
- center ：侧轴的中点对齐。 align-items: center;
3. baseline : 伸缩项目的第一行文字的基线对齐。align-items: baseline;
4 stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）align-items: stretch;
多行的情况
属性值： align-content
常用值：
- flex-start ：与侧轴的起点对齐。 align-content: flex-start;
- flex-end ：与侧轴的终点对齐。 align-content: flex-end;
- center ：与侧轴的中点对齐。 align-content: center;
- space-between ：与侧轴两端对齐，中间平均分布。 align-content:space-between;
- space-around ：伸缩项目间的距离相等，比距边缘大一倍。 align-content:space-around;
5. space-evenly : 在侧轴上完全平分。 align-content:space-evenly;
- stretch ：占满整个侧轴。—— 默认值 align-content: stretch;
