CSS3--flex布局

flex 布局：水平主轴：水平主轴开始位置到结束位置垂直交叉轴：垂直交叉轴开始位置到结束位置

flex布局属性：flex布局属性：属性名称属性值　解释备注flex-direction（伸缩流方向）row按行排列从左到右row-reverse按行反向排列从右到左column按列排列从上到下column-reverse按列反向排列从下到上flex-wrap（伸缩换行）nowrap不换行默认属性，单行不换wrap换行多行wrap-reverse反向换行多行，注意换行的方向flex-flow（伸缩属性）flex-direction+flex-wrap复合属性结合使用justify-content（主轴对齐）flex-start主轴起始位置对齐水平方向结束位置留白flex-end主轴结束位置对齐水平方向开始位置留白center主轴居中对齐水平居中紧凑，两边留白space-between主轴平均对齐开始位置与结束位置不留白，中间均等分留白space-around居中平均对齐两头留白大小为中间留白的一半align-Items（交叉轴对齐）flex-start侧轴起始位置对齐垂直方向结束位置留白flex-end侧轴结束位置对齐垂直方向开始位置留白center侧轴居中对齐垂直居中紧凑，两边留白stretch上下拉伸对齐占满整个交叉轴baseline根据文字的下基线对齐文字底部对齐align-content（多轴线的对齐方式）前五个属性与水平对齐属性一致stretch轴线占满整个交叉轴单个flex项目属性单个flex项目属性属性名属性值解释注释order（数值）默认值0定义项目的排列顺序数值越小越排前面flex-grow（伸缩放大）默认值1全为1，项目大小相等，如果有一个项目为2，则这个项目就是整个项目集合大小的两倍数值越大项目大小越大flex-shrink（伸缩缩小）默认值1空间不足，则项目缩小，值小于等于1数值越小项目就缩小多少倍flex-basis（项目大小）默认值auto再分配多余空间之前，醒目占据主轴的空间。浏览器会根据这个属性计算主轴是否有多余空间，默认值为auto，即项目本身的大小flex（伸缩性）复合属性flex-grow，flex-shrink，flex-basis1,1，autoalign-self（交叉轴上单个项目对齐方式，默认值为auto）flex-start交叉轴向上对齐flex-end交叉轴向下对齐center交叉轴居中对齐stretch拉伸填充整个容器baseline文字基线对齐文字下基线flex布局的注意事项：flex布局是针对容器中有多个子容器的节点，在父容器节点中使用display：flex，同时可以在改父容器中设置子容器排列的顺序，方向。通过设置子容器的order属性来对子容器的顺序进行排序。