flex布局

flex布局

• 即弹性盒子布局，是给父元素添加flex属性，以控制子元素的位置和排列。

6常用容器属性

1. flex-direction: 设置主轴的方向。
2. justify-content: 设置主轴上的子元素排列方式。
3. flex-warp: 设置子元素是否换行。
4. align-items: 设置侧轴上的子元素的排列方式(单行)。
5. align-content: 设置侧轴上的子元素的排列方式(多行)。
6. flex-flow: flex-flow是flex-direction和flex-wrap的合集。

1.flex-direction 设置主轴的方向

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2.justify-content 设置主轴上的子元素排列方式

• row 默认从左到右
• row-reverse 右到左
• column 从上到下
• column-reverse 从下到上

3.flex-warp 设置子元素是否换行

• 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-flow 是flex-direction属性和flex-wrap属性的简写形式

• row nowrap  默认值为：row nowrap，意思就是主轴方向水平向右，不换行。