布局分布(flex弹性盒)

父元素属性

flex-direction 调整主轴方向
row                    行排布

row-reverse       同一行反向排布

column               列排布

column-reverse  同一列反向排布

justify-content  主轴子元素排列
flex-start              从头部排列

flex-end               从尾部排列

center                  居中排列

space-around      平分剩余

space-between    两边贴边，平分剩余

align-items  侧轴方向，子元素的排列
flex-start               从上到下
flex-end                从下到上
stretch                  拉伸（子元素去掉高度）
center                   居中

flex-wrap  属性 子元素是否换行
wrap                     换行
nowrap                 不换行

flex-flow 属性： 复合属性，flex-direction和flex-wrap
flex-flow:row-wrap

align-content属性 子元素整体，在父元素中的对齐方式
flex-start                侧轴头部排列
flex-end                 侧轴尾部排列
center                    居中排列
space-around        侧轴平分空间
space-between      两侧贴边，平分剩余空间

子元素属性
flex属性 份数

flex:1

align-self属性 自己的对齐方式
stretch                     拉伸
center                      居中
start                         左对齐
end                          右对齐