一、Flex布局含义
1.flex布局含义：flex布局，也被称为弹性盒子布局，是CSS3里新增的一种布局方式，通过使用flex布局，可以让布局更加便捷高效。
2.如何触发弹性盒子？
给父元素添加display属性，并将取值设置成flex。
3.触发弹性盒子有哪些特点？
- 子元素默认横向显示；
- 子元素会默认变成块级元素，能设置宽度高度；
- 如果只有一个子元素的话，则给子元素添加
margin:auto;的时候，会让子元素直接实现水平垂直居中显示。
二、Flex布局基础概念
- flex容器：采用flex布局的元素的父元素；
- flex项目：采用flex布局容器里面的子元素；
- 横轴(水平轴)：水平方向轴线；
- 纵轴(垂直轴)：垂直方向轴线；
- 主轴：触发弹性盒子后，项目的排列方向；
- 侧轴(交叉轴)：触发弹性盒子后，与主轴对立的方向。
三、Flex布局容器属性
3.1 触发弹性盒子
默认情况下项目都是纵向排列的。
原因：项目是块级元素，块级本质就是纵向排列。
给容器(父元素)触发弹性盒子：display:flex;
触发弹性盒子后，项目默认横向显示。
3.2 修改主轴方向
| 属性 | 值 | 说明 |
|---|---|---|
| flex-direction | row | 默认值，横向 |
| row-reverse | 主轴在横向，项目反方向显示 | |
| column | 主轴在纵向，项目正向显示 | |
| column-reverse | 主轴在纵向，项目反方向显示 |
3.3 主轴对齐方式
| 属性 | 值 | 说明 |
|---|---|---|
| justify-content | flex-start | 默认值，主轴的开始位置显示 |
| flex-end | 主轴的结束位置显示 | |
| center | 主轴的居中位置显示 | |
| space-between | 主轴两端对齐 | |
| space-around | 主轴的两端环绕，即项目之间的距离是贴边项目与容器之间距离的两倍 | |
| space-evenly | 主轴的间距均分 |
3.4 交叉轴对齐方式
| 属性 | 值 | 说明 |
|---|---|---|
| align-items | flex-start | 默认值，交叉轴的开始位置显示 |
| flex-end | 交叉轴的结束位置显示 | |
| center | 交叉轴的居中位置显示 | |
| baseline | 交叉轴的基线位置显示，与flex-start效果一致 | |
| stretch | 有拉伸效果，前提是项目没有设置高度，或高度是自适应的 |
3.5 折行属性
没有触发弹性盒子之前，子元素过多的时候，默认会产生溢出效果，元素有自己的宽度和高度。
当触发完弹性盒子之前，子元素会横向显示，没有折行，并且原有宽度被挤压了。
需要实现不挤压，让项目折行的效果。
| 属性 | 值 | 说明 |
|---|---|---|
| flex-wrap | nowrap | 默认值，不折行 |
| wrap | 折行显示 |
1.为什么折行之后，右侧会有留白空间呢？
因为右侧区域留白放不下一个项目了，只能折行显示。
2.为什么行与行之间有这么大的间距？
因为项目设置了固定高度。如果没有高度的话，高度默认是拉伸效果，高度均分在每一行中。
3.6 调整行间距
如果项目过多，添加折行之后，项目之间会有比较大的行间距，需要调整。
| 属性 | 值 | 说明 |
|---|---|---|
| align-content | flex-start | 侧轴的开始位置显示，没有行间距 |
| flex-end | 侧轴的结束位置显示，没有行间距 | |
| center | 侧轴的居中位置显示，没有行间距 | |
| space-between | 侧轴的两端对齐，即首行和尾行贴边显示，中间的间距自动平分 | |
| space-around | 侧轴的行间距环绕，即行与行之间的距离，是贴边行距离容器之间距离的2倍 | |
| space-evenly | 侧轴的行间距均分 |
四、Flex布局项目属性
4.1 单独调整侧轴对齐方式
| 属性 | 值 | 说明 |
|---|---|---|
| align-self | flex-start | 侧轴的开始位置显示 |
| flex-end | 侧轴的结束位置显示 | |
| center | 侧轴的居中位置显示 | |
| baseline | 侧轴的基线位置，与flex-start效果一致 | |
| stretch | 有拉伸效果，前提是项目没有设置高度，或高度是自适应的 |
4.2 调整项目显示顺序
需要使用属性order，取值为数值。order的默认取值为auto，可以理解为0，order的值可以取正数或负数，取值越小排列越靠前；取值越大排列越靠后。
4.3 占剩余空间的所有
通过flex：1实现。
1.主轴在横向的时候
如果项目不设置高度，默认高度是拉伸的，项目添加flex:1;实现的是占剩余宽度的所有。若给所有项目添加flex:1;，所有项目平分了容器的宽度。
2.主轴在纵向的时候
如果项目不设置宽度，默认宽度是拉伸的，项目添加flex:1;实现的是占剩余高度的所有。若给所有项目添加flex:1;，所有项目平分了容器的高度。
4.4 flex:1详解
1.flex属性是一个复合属性，是由flex-grow、flex-shrink、flex-basis三个属性的缩写。
2.flex-grow：定义项目放大的放大比例，默认为0，即存在剩余空间也不会放大。若所有项目的值为1，则等分剩余空间(自动放大占位)。flex-grow为n的项目，占据的空间(放大的比例)是flex-grow为1的n倍。
3.flex-basis：定义在分配多余空间之前，项目占据的主轴空间，由浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值，默认值是auto。
4.flex-shrink：定义项目的缩小比例，取值0/1。
