Flexbox 布局也叫 Flex 布局，弹性盒子布局。
它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来，更简便、完整、响应式地实现各种页面布局。
它的主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有 子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器属性
flex-direction
flex-direction 属性决定主轴的方向（即项目的排列方向）。
| 属性值 | 含义 |
|---|---|
| row | 默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列 |
| row-reverse | 主轴为水平方向（水平布局），起点在右端，从右向左排列 |
| column | 主轴为垂直方向（垂直布局），起点在上沿，从上往下排列 |
| column-reverse | 主轴为垂直方向（垂直布局），起点在下沿，从下往上排列 |
justify-content
justify-content属性定义了项目在主轴上的对齐方式。
| 属性值 | 含义 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| space-evenly | 均匀排列每个元素 |
align-items
align-items属性定义项目在交叉轴上如何对齐。
| 属性值 | 含义 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | （默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度 |
flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
| 属性值 | 含义 |
|---|---|
| nowrap | 默认值，表示不换行 |
| wrap | 换行 |
| wrap-reverse | 换行，第一行在下方 |
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow: row wrap;
align-content
属性和align-items一样，但是多了space-的设置
align-content适用于多行情况
项目属性
order
order属性用来定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。
flex-grow
flex-grow属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大。
flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小。
flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它的初始值是 auto，此时浏览器会检查元素是否设置了 width 属性值。
如果有，则使用 width 的值作为 flex-basis 的值；
如果没有，则用元素内容自身的大小。
如果 flex-basis 的值不是 auto，width 属性会被忽略。
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex:0 1 auto;
}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex与margin auto
之前埋了一个关子，在学习margin的时候。它有一个auto属性需要到flex才能用到
