概述

CSS Flexbox 是现代网页布局的强大工具。本文详细介绍用于 flex 容器的 CSS 属性：

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

flex-direction 属性

flex-direction 属性指定 flex 容器中 flex 项目的显示方向。

该属性可以具有以下值之一：

• row
• column
• row-reverse
• column-reverse

Row（行）

示例：
row 值是默认值，它水平显示 flex 项目（从左到右）：

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

Column（列）

示例：
column 值垂直显示 flex 项目（从上到下）：

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

Row-reverse（反向行）

示例：
row-reverse 值水平显示 flex 项目（但从右到左）：

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

Column-reverse（反向列）

示例：
column-reverse 值垂直显示 flex 项目（但从下到上）：

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

flex-wrap 属性

flex-wrap 属性指定当 flex 项目在一行上没有足够空间时是否应该换行。

该属性可以具有以下值之一：

• nowrap
• wrap
• wrap-reverse

Nowrap（不换行）

nowrap 值指定 flex 项目不会换行（这是默认值）：

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

Wrap（换行）

wrap 值指定 flex 项目在必要时会换行：

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

Wrap-reverse（反向换行）

wrap-reverse 值指定 flex 项目在必要时会换行，但顺序相反：

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

flex-flow 属性

flex-flow 属性是设置 flex-direction 和 flex-wrap 属性的简写属性。

示例：

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

CSS justify-content 属性

justify-content 属性用于在 flex 项目不使用主轴（水平方向）上的所有可用空间时对齐 flex 项目。

该属性可以具有以下值之一：

• center
• flex-start
• flex-end
• space-around
• space-between
• space-evenly

Center（居中）

示例：
center 值将 flex 项目定位在容器的中心：

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

Flex Start（弹性开始）

示例：
flex-start 值将 flex 项目定位在容器的开始位置（这是默认值）：

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

Flex End（弹性结束）

示例：
flex-end 值将 flex 项目定位在容器的末尾：

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

Space Around（周围间距）

示例：
space-around 值在 flex 项目周围显示间距：

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

Space Between（项目间间距）

示例：
space-between 值在 flex 项目之间显示间距：

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

Space Evenly（均匀间距）

示例：
space-evenly 值在 flex 项目周围显示相等的间距：

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

Align-items 属性

align-items 属性用于在 flex 项目不使用交叉轴（垂直方向）上的所有可用空间时对齐 flex 项目。

该属性可以具有以下值之一：

• center
• flex-start
• flex-end
• stretch
• baseline
• normal

Center（居中）

示例：
center 值将 flex 项目定位在容器的中间：

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

Flex-Start（弹性开始）

示例：
flex-start 值将 flex 项目定位在容器的顶部：

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

Flex-end（弹性结束）

示例：
flex-end 值将 flex 项目定位在容器的底部：

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

Stretch（拉伸）

示例：
stretch 值拉伸 flex 项目以填充容器（这等同于默认的 "normal"）：

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

Baseline（基线）

示例：
baseline 值将 flex 项目定位在容器的基线：

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

总结

CSS Flexbox 提供了强大的布局控制能力：

1. flex-direction - 控制主轴方向
2. flex-wrap - 控制换行行为
3. flex-flow - 简写属性组合方向和换行
4. justify-content - 主轴对齐
5. align-items - 交叉轴对齐

掌握这些属性，您就能创建灵活、响应式的网页布局。