你有没有过这样的经历？
想让导航栏里的链接均匀分布在容器两侧，试了float: left和text-align: right组合，结果链接挤成一团；
想做一张卡片列表，希望卡片自动换行且间距一致，用inline-block加margin调了半天，要么间距不对，要么换行后错位；
或者想让一个容器里的元素垂直居中，写了vertical-align: middle却没效果……

如果遇到过这些问题，那今天的Flexbox（弹性盒子）布局一定能帮你解决。它是CSS中专门用于一维元素排列的布局模型，能让元素在容器内灵活调整位置、大小和对齐方式，代码简洁且易维护。哪怕你是零基础，跟着本文走，也能快速上手。

一、先搞懂两个核心概念：容器与项目

要使用Flexbox，首先得明确两个角色：

  • Flex容器：应用display: flex的父元素（比如一个div或nav）。它像一个“弹性盒子”，决定了里面元素的排列规则。
  • Flex项目：容器的直接子元素（比如div里的a标签或p标签）。一旦父元素变成Flex容器，子元素自动成为“项目”，遵循Flexbox的排列逻辑。

举个例子： 

<!-- 容器：nav标签 -->
<nav class="navbar">
  <!-- 项目：四个a标签 -->
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</nav>

给nav加display: flex，它就成了Flex容器，里面的四个链接自动变成Flex项目，接下来所有Flexbox属性都围绕这个容器和项目展开。

二、理解主轴与交叉轴：元素排列的“方向坐标系”

Flexbox的核心逻辑基于两个轴：

  • 主轴（Main Axis）：元素默认排列的方向。默认是水平方向（从左到右），类似“行”。
  • 交叉轴（Cross Axis）：与主轴垂直的方向。默认是垂直方向（从上到下），类似“列”。

可以把容器想象成一个坐标系：

  • 主轴是x轴，项目沿着x轴排列；
  • 交叉轴是y轴，项目的对齐（比如垂直居中）基于y轴调整。

注意：当你改变主轴方向（后面会讲flex-direction），交叉轴也会随之改变（比如主轴变成垂直，交叉轴就变成水平）。

三、Flex容器的常用属性：控制项目的排列规则

Flex容器的属性决定了项目在容器内的整体布局，最常用的有以下几个：

1. flex-direction：改变主轴方向

作用：指定主轴的方向，从而改变项目的排列方向。
可选值：

  • row（默认）：主轴水平向左到右（项目从左到右排列）；
  • row-reverse：主轴水平向右到左（项目从右到左排列）；
  • column：主轴垂直向上到下（项目从上到下排列）；
  • column-reverse：主轴垂直向下到上（项目从下到上排列）。

例子：想让导航栏的链接从右到左排列，只需给容器加flex-direction: row-reverse： 

.navbar {
  display: flex;
  flex-direction: row-reverse; /* 链接从右到左排 */
}

2. justify-content：控制项目在主轴上的对齐

作用：调整项目在主轴上的间距和对齐方式，解决“元素怎么排”的问题。
可选值（结合例子更好记）：

  • flex-start（默认）：项目靠主轴起点排列（比如水平左对齐）；
  • flex-end：项目靠主轴终点排列（比如水平右对齐）；
  • center：项目在主轴上居中对齐；
  • space-between：两端对齐，项目之间的间距相等（比如导航栏链接左右贴边，中间间距一样）；
  • space-around：每个项目两边的间距相等（比如卡片列表，每个卡片左右都有间隙）；
  • space-evenly：所有间距（包括两端）都相等（比如项目均匀分布在容器内）。

例子：卡片列表想让卡片居中且有间隙，用justify-content: space-around： 

.card-container {
  display: flex;
  justify-content: space-around; /* 卡片居中，两边有间隙 */
}

3. align-items：控制项目在交叉轴上的对齐

作用：调整项目在交叉轴上的对齐方式，解决“元素怎么站”的问题（比如垂直居中）。
可选值：

  • stretch（默认）：项目拉伸填充交叉轴（比如项目高度不一致时，会被拉成和容器一样高）；
  • flex-start：项目靠交叉轴起点排列（比如垂直顶部对齐）；
  • flex-end：项目靠交叉轴终点排列（比如垂直底部对齐）；
  • center：项目在交叉轴上居中对齐（比如导航栏链接垂直居中）。

例子：导航栏里的链接高度不一样，想让它们垂直居中，用align-items: center： 

.navbar {
  display: flex;
  align-items: center; /* 链接垂直居中 */
}

4. flex-wrap：控制项目是否换行

作用：当容器空间不足时，项目是否自动换行。
可选值：

  • nowrap（默认）：不换行，项目会被压缩（比如容器变窄，卡片会挤在一起）；
  • wrap：换行，项目从上到下排列（比如卡片列表太长，自动换到下一行）；
  • wrap-reverse：反向换行，项目从下到上排列。

例子：卡片列表想自动换行，用flex-wrap: wrap： 

.card-container {
  display: flex;
  flex-wrap: wrap; /* 卡片换行 */
}

5. align-content：控制多行项目在交叉轴上的对齐

作用：当项目换行后（flex-wrap: wrap），调整多行项目在交叉轴上的整体对齐方式。
可选值（结合例子）：

  • stretch（默认）：多行项目拉伸填充交叉轴；
  • flex-start：多行项目靠交叉轴起点排列（比如垂直顶部对齐）；
  • center：多行项目在交叉轴上居中对齐；
  • space-between：多行项目两端对齐，行之间间距相等。

例子：卡片换行后，想让多行卡片垂直居中，用align-content: center： 

.card-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* 多行卡片垂直居中 */
}

四、Flex项目的常用属性：调整单个元素的排列

除了容器属性，Flex项目也有自己的属性，可以覆盖容器的规则，调整单个元素的位置或大小：

1. order：改变项目的排列顺序

作用：指定项目的排列顺序，数值越小越靠前（默认是0）。
例子：想让“联系我们”链接放在导航栏最前面，不用改HTML结构，直接加order: -1： 

<a href="#" style="order: -1;">联系我们</a> <!-- 放在最前面 -->

2. flex-grow：控制项目的放大比例

作用：当容器有剩余空间时，项目是否放大。默认是0（不放大）。
例子：三个卡片，想让第三个卡片占比更大，设置flex-grow: 2（另外两个是1）： 

.card:nth-child(3) {
  flex-grow: 2; /* 第三个卡片放大两倍 */
}

3. flex-shrink：控制项目的缩小比例

作用：当容器空间不足时，项目是否缩小。默认是1（会缩小）。
例子：想让某个卡片不缩小，设置flex-shrink: 0： 

.card {
  flex-shrink: 0; /* 卡片不缩小，保持原宽度 */
}

4. align-self：覆盖容器的align-items

作用：调整单个项目在交叉轴上的对齐方式，覆盖容器的align-items规则。
例子：某个卡片想单独底部对齐，用align-self: flex-end： 

.card:nth-child(2) {
  align-self: flex-end; /* 第二个卡片底部对齐 */
}

五、实战：用Flexbox做一个导航栏+卡片列表

说了这么多，不如动手做个例子巩固一下。

1. 导航栏：链接两端对齐+垂直居中

HTML： 

<nav class="navbar">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</nav>

CSS： 

.navbar {
  display: flex; /* 开启Flexbox */
  justify-content: space-between; /* 链接两端对齐 */
  align-items: center; /* 链接垂直居中 */
  padding: 1rem;
  background-color: #f0f0f0;
}

.navbar a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
  border-radius: 0.25rem;
}

.navbar a:hover {
  background-color: #e0e0e0;
}

2. 卡片列表：自动换行+均匀分布

HTML： 

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
</div>

CSS： 

.card-container {
  display: flex; /* 开启Flexbox */
  flex-wrap: wrap; /* 卡片换行 */
  justify-content: space-around; /* 卡片均匀分布 */
  gap: 1rem; /* 卡片之间的间隙（现代浏览器支持） */
  padding: 1rem;
}

.card {
  flex: 1 1 200px; /* 简写：flex-grow=1, flex-shrink=1, flex-basis=200px */
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

解释：

  • flex: 1 1 200px是Flex项目的简写属性，等于flex-grow: 1（放大比例1）、flex-shrink: 1（缩小比例1）、flex-basis: 200px（初始宽度200px）。意思是：项目初始宽度200px，当容器有剩余空间时放大，空间不足时缩小。
  • gap: 1rem是现代浏览器支持的属性，用来设置项目之间的间隙，比margin更方便。

六、注意事项

  1. Flexbox适合一维布局：比如行或列的排列，二维布局（比如网格）建议用CSS Grid。
  2. 容器与项目属性不要混淆：justify-content是容器属性（控制项目在主轴的对齐），order是项目属性（调整单个项目的顺序）。
  3. 兼容性：主流浏览器（Chrome、Firefox、Edge、Safari）都支持Flexbox，但旧版本（比如IE9及以下）不支持，不过现在基本不用考虑IE了。

总结

Flexbox布局的核心是容器控制整体规则，项目调整单个元素。记住几个关键属性：

  • 容器：display: flex（开启）、flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-wrap（换行）；
  • 项目：order（顺序）、flex-grow（放大）、flex-shrink（缩小）、align-self（单个对齐）。

其实Flexbox一点都不难，多练几个例子，比如导航栏、卡片列表、表单布局，你会发现它比传统布局省了很多麻烦。下次遇到元素排列的问题，不妨试试Flexbox——它会成为你CSS工具箱里的“瑞士军刀”。

赶紧打开编辑器，动手试试吧！如果有问题，欢迎在评论区留言~