flex布局

一 说明

        flex布局是一种html盒模型布局方式。

二 使用

        基于父元素。父元素必须使用display:flex;来声明其子元素使用flex布局。

        除了声明display，其还有以下属性来控制子元素的布局：

1) 属性名称：flex-direction 主轴方向

属性值：

• row（自左向右横向布局）
• row-reverse（自右向左横向布局）
• column（自上而下竖向布局)
• column-reverse（自下而上竖向布局）

2) 属性名称：justify-content 对齐方式

属性值：

• flex-start 从起点开始
• space-between：先两边贴边，再平分剩余空间
• space-around:平分剩余空间
• center：居中
• flex-end:从终点开始

3) 属性名称：flex-wrap 换行方式

属性值：  

• nowrap：不换行
• wrap：换行

4) 属性名称：align-items 单行侧轴对齐方式

属性值：  

• flex-start 从起点开始
• flex-end:从终点开始
• center：居中
• stretch：拉伸，不能设置元素高度

5) 属性名称：align-content 多行侧轴对齐方式

属性值：  

• flex-start 从起点开始
• flex-end:从终点开始
• center：居中
• space-around:平局分剩余空间
• space-between：先两边贴边，再平分剩余空间
• stretch：拉伸，不能设置元素高度

6) 属性名称：合写flex-directon和flex-wrap

三 子项属性

flex：所占剩余空间的份数，盒子必须有宽高，然后才能有剩余。

        比例=子项flex值/各子项flex值加和

align-self：单个子项的对齐方式

order：修改排列顺序