flex 布局
容器属性
flex-flow ［flex-direction］［flex-wrap］
flex-direction： [row] [row-reverse] | [column] [column-reverse] 方向
flex-wrap： [nowrap] | [wrap] | [wrap-reverse( 换行第二行在上面 )] 包裹
justify-content｜主轴上对齐方式｜
flex-start
flex-end
center 居中
space-between 保持相等间隔两端对齐
space-around 中间间隔两倍于两端
align-items｜交叉轴上对齐方式｜
flex-start：
flex-end：
center：交叉轴的中点对齐
baseline: 首行文字的基线对齐
stretch（默认值）：高度未设或auto，将占满整个容器的高度。
align-content ｜多轴线对齐方式｜
flex-start：
flex-end：
center： 与交叉轴的中点对齐
space-between：保持相等间隔两端对齐
space-around： 中间间隔两倍于两端
stretch(默认值)：轴线占满整个交叉轴。
项目属性
order 定义排序 数越小越前
flex-grow 剩余空间分配的比例关系 定义放大比列， 默认为0，为 0 时不放大
flex-shrink 定义缩小比列，默认为 1，空间不足时自动缩小；为 0 时不缩小
flex-basis 定义项目基础空间，默认auto项目本来大小
align-self 定义项目自己的对齐方式
flex [flex-grow] [flex-shrink] [flex-basis] 简写式
flex: 默认值 [0 1 auto] | [auto] (1 1 auto) | [none] (0 0 auto)
align-self:
auto 表示继承父元素的align-items，如果无父元素等同stretch
flex-start
flex-end
center
baseline
stretch
主轴方向 由 flex-direction属性确定
flex 属性 [flex-grow] [flex-shrink] [flex-basis]
basis 设置为0，分配所有空间 ，可得到每个项目宽的精准比列
flex 应用
父元素包含不定数量子元素
带图标input输入框
父元素包裹图标和输入框，display：flex
input添加属性 flex：1
子项目的排序能力 通过order和flex-direction
切换排列顺序 flex-direction
