CSS3 弹性容器

---

父元素（容器）

通过将 display 属性设置为 flex，flex 容器将可伸缩:

实例

.flex-container {
  display: flex;
}

亲自试一试 »

以下是 flex 容器属性:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

---

flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

实例

column 值设置垂直堆叠 flex 项目（从上到下）:

.flex-container {
  display: flex;
  flex-direction: column;
}

亲自试一试 »

实例

column-reverse 值垂直堆叠 flex 项目（但从下到上）:

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

亲自试一试 »

实例

row 值水平堆叠 flex 项目（从左到右）:

.flex-container {
  display: flex;
  flex-direction: row;
}

亲自试一试 »

实例

row-reverse 值水平堆叠 flex 项目（但从右到左）:

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

亲自试一试 »

---

flex-wrap 属性

flex-wrap 属性规定是否应该对 flex 项目换行。

下面的例子包含 12 个 flex 项目，以便更好地演示 flex-wrap 属性。

实例

wrap 值规定 flex 项目将在必要时进行换行:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

亲自试一试 »

实例

nowrap 值规定将不对 flex 项目换行（默认）:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

亲自试一试 »

实例

wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

亲自试一试 »

---

flex-flow 属性

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

实例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

亲自试一试 »

---

justify-content 属性

justify-content 属性用于对齐 flex 项目:

实例

center 值将 flex 项目在容器的中心对齐:

.flex-container {
  display: flex;
  justify-content: center;
}

亲自试一试 »

实例

flex-start 值将 flex 项目在容器的开头对齐（默认）:

.flex-container {
  display: flex;
  justify-content: flex-start;
}

亲自试一试 »

实例

flex-end 值将 flex 项目在容器的末端对齐:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

亲自试一试 »

实例

space-around 值显示行之前、之间和之后带有空格的 flex 项目:

.flex-container {
  display: flex;
  justify-content: space-around;
}

亲自试一试 »

实例

space-between 值显示行之间有空格的 flex 项目:

.flex-container {
  display: flex;
  justify-content: space-between;
}

亲自试一试 »

---

align-items 属性

align-items 属性用于垂直对齐 flex 项目。

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-items 属性。

实例

center 值将 flex 项目在容器中间对齐:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

亲自试一试 »

实例

flex-start 值将 flex 项目在容器顶部对齐:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

亲自试一试 »

实例

flex-end 值将弹性项目在容器底部对齐:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

亲自试一试 »

实例

stretch 值拉伸 flex 项目以填充容器（默认）:

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

亲自试一试 »

实例

baseline 值使 flex 项目基线对齐:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

注释: 该例使用不同的 font-size 来演示项目已按文本基线对齐:

---

2

3

4

亲自试一试 »

---

align-content 属性

align-content 属性用于对齐弹性线。

在这些例子中，我们使用 600 像素高的容器，并将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。

实例

space-between 值显示的弹性线之间有相等的间距:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

亲自试一试 »

实例

space-around 值显示弹性线在其之前、之间和之后带有空格:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

亲自试一试 »

实例

stretch 值拉伸弹性线以占据剩余空间（默认）:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

亲自试一试 »

实例

center 值在容器中间显示弹性线:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

亲自试一试 »

实例

flex-start 值在容器开头显示弹性线:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

亲自试一试 »

实例

flex-end 值在容器的末尾显示弹性线:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

亲自试一试 »

---

完美的居中

在下面的例子中，我们会解决一个非常常见的样式问题:完美居中。

解决方案:将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中:

实例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

亲自试一试 »