CSS伸缩盒弹性布局

display:flex 伸缩盒
1.主轴：
默认情况下主轴是x轴，即flex容器中各元素在一行中分为多列显示；
如果主轴改成y轴，则一列中显示多行

2.排列方向:flex-direction
（1）列布局：沿着水平方向延伸

flex-direction:row; 从左到右
flex-direction:row-reverse; 从右向左

（2）行布局：沿着垂直方向

flex-direction:column; 从上到下
flex-direction:column-reverse; 从下到上

3.设置换行
flex-wrap:wrap;在一行中填充，放不下就换行
实现多行多列容器
flex-flow是flex-direction和flex-wrap的简写

4.比例划分

flex-grow：元素放大比例（子元素索取父元素剩余宽度的比例）
flex-shrink：子元素宽度大于父元素时，元素缩小自己的比例
flex-basis：设置元素宽度，如果同时设置了width和flex-basis，则flex-basis会覆盖width

flex简写属性：按照上面顺序
例如：flex:1 200px;——盒子最小值为200px，每个占一份

5.对齐方式

（1）主轴对齐方式：justify-content:
取值：

flex-start 【默认值】在主轴的开始显示
flex-end 在主轴的结束显示
center 在主轴的中心显示
space-around 填充空白自适应在主轴中心显示
space-between填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白

（2）交叉轴对齐方式：align-items:

stretch 【默认值】将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器
flex-start 在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部
flex-end在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部
center 盒子在交叉轴中心显示
baseline 基线对齐（文本对齐）

（3）多轴排列在交叉轴对齐方式

align-content: center; /* 将项目放置在中点 */

align-content: start; /* 最先放置项目 */

align-content: end; /* 最后放置项目 */

align-content: flex-start; /* 从起始点开始放置flex元素 */

align-content: flex-end; /* 从终止点开始放置flex元素 */