Flex布局

Flex布局简介

使用方法 display: flex; 移动端常用。

通常把flex类型的盒子叫做flex容器，其所有的子元素叫做flex项目

flex盒子的子元素中的部分属性会失效（由flex其他的属性可代替）

flex盒子的子元素会有一个默认的排序方向（横向）称为主轴，另一个方向称为辅轴。

flex盒子的子元素默认不允许换行，如果在一行中（或一列）超出父元素宽度（或高度）。会缩小子元素的宽度，以保证其能够放在一行中。

Flex布局的CSS属性

1. 父属性（flex容器属性）：

（1）flex-direction 设置主轴方向

• 按行（默认，从左到右） row

  flex-direction: row;
  

• 按列（从上到下） column

  flex-direction: column;
  

• 按行（从右到左） row-reverse

  flex-direction: row-reverse;
  

• 按列（从下到上） column-reverse

  flex-direction: column-reverse;
  

---

（2）justify-content 设置主轴上的子元素排列（对齐）方式

• flex-start (默认，从头开始)

    	  justify-content: flex-start;

• flex-end (从最后开始)

  justify-content: flex-end;
  

• center (居中)

  justify-content:center;
  

• space-around (平均分配距离)

  justify-content:space-around;
  

• space-between (两边贴边，平均分配距离)

  justify-content: space-between;
  

---

以下举例使用默认的flex-direction: row; 方向，其他方向类似

（3）flex-wrap 设置是否允许子元素换行（或列）

• nowrap （默认，不允许换行）子元素会被压缩

  flex-wrap: nowrap;
  

• wrap (允许换行)

  flex-wrap: wrap;
  

  ---

（4）align-items设置侧轴上子元素排列（对齐）方式，用于不换行时

• stretch 拉伸，默认-拉伸到父盒子大小（前提：侧轴方向上子盒子没有设置宽度或高度）

  align-items: stretch;
  

• flex-start (从头开始)

  align-items: flex-start;
  

• flex-end (从尾部开始)

  align-items: flex-end;
  

• center (居中)

  align-items: center;
  

---

以下举例使用默认的flex-direction: row; 方向，即竖直方向上进行对齐。其他方向类似

（5）align-content设置侧轴上子元素排列（对齐）方式，用于换行时

• stretch 拉伸，默认-拉伸到父盒子大小（前提：侧轴方向上子盒子没有设置宽度或高度）

  align-content: stretch;
  

• flex-start (从头开始)

  align-content: flex-start;
  

• flex-end (从尾部开始)

  align-content: flex-end;
  

• center (居中)

  align-content: center;
  

• space-around (平均分配距离)

  align-content: space-around;
  

• space-between (两边贴边，中间平均分配距离)

  align-content: space-between;
  

---

以下举例使用默认的flex-direction: row; 方向，即竖直方向上进行对齐。其他方向类似

（6）flex-flow 复合属性

可以同时设置主轴方向和换行,如：

flex-flow: column wrap;

2. 子属性（flex项目）：

（1）flex : 子元素所占剩余空间份数

• 0 （默认）

• 数字

flex获得剩余空间，不会计算已被其他子元素所占空间，如下图的左侧100px宽的盒子。

（2）align-self : 控制自己在侧轴上的对齐方式

和上面的属性一致，只是控制单独一个子元素的对齐方式，不影响其他子元素。

（3）order : 定义项目的排列顺序

数字越小越前，可以为负数

• 0 （默认）

• 数字