弹性盒模型

目的
提供一种更加有效的方式来布置、对齐和分布在容器之间的各项内容，即使他们的大小是未知的变化的
让容器有能力改变项目的宽和高，以填满可用空间
布局与方向无关
最适合小规模布局 （大规模用网格）
属性
display:flex / display:inline-flex
适用于父类元素
声明要使用弹性盒模型
flex-direction
写在父级css中，但是作用于子级
检索，子级在盒子中的位置  （子级的排列顺序）

flex-direction :row   横向，左到右
flex-direction :row-reverse   反横向，右到左
flex-direction :column     纵向，从上到下
flex-direction :column-reverse    反纵向，从上到下
flex-wrap 
写在父级，作用于子级
检索，子级是否超出父级，换不换行
值
flex-wrap :nowrap   不换行
flex-wrap :wrap 换行
flex-wrap :wrap-reverse    反转wrap排列
flex-flow
复合属性，写在父级，作用于子级
flex-flow：<flex-direction> <flex-wrap>
就是先写排列方式，再写是否换行
justify-content
检索弹性盒子在主轴（x）方向上的对齐方式
写在父级，作用于子级
justify-content :flex-start      左对齐
justify-content :flex-end    右对齐
justify-content :center     居中
justify-content :space-between   两端居中，中间等间距
justify-content :space-around   n盒子的个数均分为n个空间，盒子在各自空间内居中
align-items
检索弹性盒子在y轴上的对齐方式
写在父级，作用于子级
值
align-items :flex-start      置顶
align-items :flex-end    置底
align-items :center     居中
align-items :baseline   与基线对齐
align-items :stretch 置顶+置底，高度受min-height与max-height制约
align-content
检索 换行时对齐方式
写在父级，作用于子级
align-content :flex-start      置顶
align-content :flex-end    置底
align-content :center     居中
align-content :space-between   上下置顶+置底 ，中间居中
align-content :space-around   纵向平分空间，各行居中显示
align-content :stretch   纵向平分空间，各行以最大方式显示
order
排列顺序
写在子级
值越小，排位越靠前
flex-grow
分配剩余空间
写在子级
值越大，分配空间越多
flex-shrink
起效前提：子级长度和大于父级
起效后，三者比例分配父级的宽度，即原定宽度不起作用了
写在子级
默认为1