CSS Flex容器完整指南

作者头像东城·2026-01-31 23:45:56·
概述
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 项目（从左到右）：
  1. .flex-container {
  2. display: flex;
  3. flex-direction: row;
  4. }
css
Column（列）
示例：
column 值垂直显示 flex 项目（从上到下）：
  1. .flex-container {
  2. display: flex;
  3. flex-direction: column;
  4. }
css
Row-reverse（反向行）
示例：
row-reverse 值水平显示 flex 项目（但从右到左）：
  1. .flex-container {
  2. display: flex;
  3. flex-direction: row-reverse;
  4. }
css
Column-reverse（反向列）
示例：
column-reverse 值垂直显示 flex 项目（但从下到上）：
  1. .flex-container {
  2. display: flex;
  3. flex-direction: column-reverse;
  4. }
css
flex-wrap 属性
flex-wrap 属性指定当 flex 项目在一行上没有足够空间时是否应该换行。
该属性可以具有以下值之一：
nowrap
wrap
wrap-reverse
Nowrap（不换行）
nowrap 值指定 flex 项目不会换行（这是默认值）：
  1. .flex-container {
  2. display: flex;
  3. flex-wrap: nowrap;
  4. }
css
Wrap（换行）
wrap 值指定 flex 项目在必要时会换行：
  1. .flex-container {
  2. display: flex;
  3. flex-wrap: wrap;
  4. }
css
Wrap-reverse（反向换行）
wrap-reverse 值指定 flex 项目在必要时会换行，但顺序相反：
  1. .flex-container {
  2. display: flex;
  3. flex-wrap: wrap-reverse;
  4. }
css
flex-flow 属性
flex-flow 属性是设置 flex-direction 和 flex-wrap 属性的简写属性。
示例：
  1. .flex-container {
  2. display: flex;
  3. flex-flow: row wrap;
  4. }
css
CSS justify-content 属性
justify-content 属性用于在 flex 项目不使用主轴（水平方向）上的所有可用空间时对齐 flex 项目。
该属性可以具有以下值之一：
center
flex-start
flex-end
space-around
space-between
space-evenly
Center（居中）
示例：
center 值将 flex 项目定位在容器的中心：
  1. .flex-container {
  2. display: flex;
  3. justify-content: center;
  4. }
css
Flex Start（弹性开始）
示例：
flex-start 值将 flex 项目定位在容器的开始位置（这是默认值）：
  1. .flex-container {
  2. display: flex;
  3. justify-content: flex-start;
  4. }
css
Flex End（弹性结束）
示例：
flex-end 值将 flex 项目定位在容器的末尾：
  1. .flex-container {
  2. display: flex;
  3. justify-content: flex-end;
  4. }
css
Space Around（周围间距）
示例：
space-around 值在 flex 项目周围显示间距：
  1. .flex-container {
  2. display: flex;
  3. justify-content: space-around;
  4. }
css
Space Between（项目间间距）
示例：
space-between 值在 flex 项目之间显示间距：
  1. .flex-container {
  2. display: flex;
  3. justify-content: space-between;
  4. }
css
Space Evenly（均匀间距）
示例：
space-evenly 值在 flex 项目周围显示相等的间距：
  1. .flex-container {
  2. display: flex;
  3. justify-content: space-evenly;
  4. }
css
Align-items 属性
align-items 属性用于在 flex 项目不使用交叉轴（垂直方向）上的所有可用空间时对齐 flex 项目。
该属性可以具有以下值之一：
center
flex-start
flex-end
stretch
baseline
normal
Center（居中）
示例：
center 值将 flex 项目定位在容器的中间：
  1. .flex-container {
  2. display: flex;
  3. height: 200px;
  4. align-items: center;
  5. }
css
Flex-Start（弹性开始）
示例：
flex-start 值将 flex 项目定位在容器的顶部：
  1. .flex-container {
  2. display: flex;
  3. height: 200px;
  4. align-items: flex-start;
  5. }
css
Flex-end（弹性结束）
示例：
flex-end 值将 flex 项目定位在容器的底部：
  1. .flex-container {
  2. display: flex;
  3. height: 200px;
  4. align-items: flex-end;
  5. }
css
Stretch（拉伸）
示例：
stretch 值拉伸 flex 项目以填充容器（这等同于默认的 "normal"）：
  1. .flex-container {
  2. display: flex;
  3. height: 200px;
  4. align-items: stretch;
  5. }
css
Baseline（基线）
示例：
baseline 值将 flex 项目定位在容器的基线：
  1. .flex-container {
  2. display: flex;
  3. height: 200px;
  4. align-items: baseline;
  5. }
css
总结
CSS Flexbox 提供了强大的布局控制能力：
flex-direction - 控制主轴方向
flex-wrap - 控制换行行为
flex-flow - 简写属性组合方向和换行
justify-content - 主轴对齐
align-items - 交叉轴对齐
掌握这些属性，您就能创建灵活、响应式的网页布局。