CSS3–flex布局

flex布局：

　　水平主轴：水平主轴开始位置到结束位置

　　垂直交叉轴：垂直交叉轴开始位置到结束位置

flex布局属性：

flex布局属性：

属性名称属性值　解释备注怨天尤人造句flex-direction（伸缩流方向）row按行排列从左到右row-rever按行反向排列从右到左column按列排列

从上到下

column-rever按列反向排列

从下到上

flex-wrap（伸缩换行）nowrap不换行

默认属性，单行不换

wrap换行

多行

wrap-rever反向换行

多行，注意换行的方向

flex-flow（伸缩属性）flex-direction+flex-wr均匀分布的分布函数ap复合属性

结合使用

justify-content（主轴对齐）flex-start主轴起始位置对齐水平方向结束位置留白flex-end主轴结束位置对齐水平方向开始位置留白center主轴居中对齐水平居中紧凑，两边留白space-between主轴平均对齐开始位置与结束位置不留白，中间均等分留白space-around居陈亮集中平均对齐两头留白大小为中间留白的一半align-items（交叉轴对齐）flex-start侧轴起始位置对齐垂直方向结束位置留白flex-end侧轴结束位置对齐垂直方向开始位置留白center侧轴居中对齐垂直居中紧凑，两边留白stretch上下拉伸对齐占满整个交叉轴baline根据文字的下基线对齐文字底部对齐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-lf（交叉轴上单个项目对齐方式，默认值为auto）flex-start交叉轴大数的认识向上对齐flex-end交叉轴向下对齐center交叉轴居中对齐stretch拉伸填充整个容器baline文字基线对齐文字下基线

flex布局的注意事项：flex布局是针对容器中有多个子容器的节点，在父容器节点中使用display：f法国vs冰岛lex，同时可以在改父容器中设置子容器排列的顺序，方向。通过设置子容器的order属性

　　　　　　　　　　来对子容器的顺序进行排序。