<!--
弹性盒：display：flex/inline-flex
一种新的布局模式
对子元素进行布局 排列丶对齐以及空白区域的分配
弹性盒 弹性盒容器
弹性盒 弹性盒项目
flex ：块级弹性盒
inline-flex ：行级弹性盒
主要区别容器与容器之间的摆放，容器内部布局之前不受影响
主轴 子元素布局中第一列的牌勋发行
侧轴 子元素布局排列的第二个方向
flex-derection：主轴方向
row（从左往右）
row-revearse(从右往左）
column（从上往下)
column-reverse（从上往下）
justify-content: 主轴元素的对齐方式
flex-staru：qi起点对齐
fkex-dnd ：终点对齐
center ：居中对齐
space-arund：四周都空白（中间空白相等，最两边空白是中间的一半相等）
space-evenly：四周都空白（所有空白宽度相等）
space-between：中间有空白 中间所有空白宽度相等
align-items：侧轴对齐方式
flex-start：侧轴起点对齐
flex-end： 侧轴终点对齐
center ： 侧轴居中对齐
baseline： 内容基线对齐
stretch ： 当子项元素没有设置高度时，拉伸子项高度，占满整个容器
flex-wrap： 是否换行
nowrap 不换行
wrap 正常换行
wrap-reverse 反转换行
align-content:侧轴内容对齐方式 和主轴对齐方式一样
flex-staru：qi起点对齐
fkex-dnd ：终点对齐
center ：居中对齐
space-arund：四周都空白（中间空白相等，最两边空白是中间的一半相等）
space-evenly：四周都空白（所有空白宽度相等）
space-between：中间有空白 中间所有空白宽度相等
弹性盒项目（子元素）
align-self：侧轴子元素，单独设置自己的对齐方式
order : 弹性盒项目的权重
默认值为0 值可以为正负
权重越大，排列在后
值相同时，根据HTML结构排列
flex-grow（扩张，增加，扩大） ：扩张比率 剩余的空白区域
默认为0
flex-shrink（收缩）：收缩比率 放不下最基础的大小时收缩
默认值1
flex-basic： 基准值--当前项目默认宽度
超过基准值综合 扩张
少于基准值总和 收缩
-->
