Flex 布局这一次讲透了，收藏这篇就够了！

最新推荐文章于 2025-09-28 15:43:44 发布

原创

最新推荐文章于 2025-09-28 15:43:44 发布 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享

我见过太多前端开发者，在深夜抱着键盘，眼神空洞地盯着那个无论如何也不肯居中的div元素。你有没有想过，为什么明明写了一堆CSS代码，页面却像叛逆的青少年，怎么都不听话？其实，你可能只是没有掌握Flex这把布局神器。在我十年的前端生涯中，没有任何一种布局技术，能像Flex这样彻底改变我构建界面的方式。

在这里插入图片描述

为什么你必须掌握Flex布局？

在Web开发的远古时代，我们用tables进行布局，后来进化到float和position，如今，Flex布局已成为前端工程师的必备技能。为什么？因为它解决了传统布局方案中最让人头痛的问题：

传统布局方案基于块和内联流方向，对于复杂的布局非常不友好。垂直居中？需要各种hack。等高列？呵呵，再写一百行CSS吧。响应式布局？那更是噩梦。

而Flex（Flexible Box）一出现，就像给设计师和开发者们打了一剂强心针。一行代码实现垂直居中，几个属性搞定响应式设计，还能轻松处理不确定宽高的元素。如果你还在依赖老旧的布局方式，那么你不仅工作效率低下，还会在现代Web开发中逐渐被淘汰。

我记得有一次，团队中一位资深工程师花了整整两天时间调试一个复杂的产品展示页面，各种float和position混用，代码惨不忍睹。而我用Flex重写，只用了3小时就完成了，并且在各种屏幕尺寸下都表现完美。从那时起，他再也不嘲笑"新技术"了。

Flex布局的基本概念

在深入了解Flex属性前，我们需要先理解几个核心概念。把这部分理解透彻，你就已经掌握了Flex的80%。

Flex容器与Flex项目

当我们设置display: flex或display: inline-flex时，该元素就变成了一个Flex容器，其直接子元素自动成为Flex项目。

.container {
   
   
  display: flex; /* 或 inline-flex */
}

记住这个比喻：Flex容器就像一个班级，而Flex项目就是班级里的学生。老师(容器)决定学生(项目)如何排列。

在这里插入图片描述

主轴与交叉轴

Flex布局中最容易被误解的概念是主轴和交叉轴。主轴不一定是水平的，交叉轴也不一定是垂直的！这完全取决于flex-direction属性：

当flex-direction为row或row-reverse时，主轴是水平方向，交叉轴是垂直方向。
当flex-direction为column或column-reverse时，主轴是垂直方向，交叉轴是水平方向。

这就像指南针，你转向哪个方向，东南西北的定义就会随之改变。记住：主轴是由flex-direction定义的方向，交叉轴总是与主轴垂直。

Flex容器的六大属性

掌握这六个属性，你就能控制Flex容器内部的整体布局方式。我会给每个属性都配上直观的例子，让你真正理解它们的用途。

1. display: flex | inline-flex

这是开启Flex布局的钥匙。flex让容器成为块级元素，inline-flex则让容器成为行内元素。就像你决定是开一家独立商店（块级）还是在商场里开一个摊位（行内）。

.container {
   
   
  display: flex; /* 块级Flex容器 */
}

.inline-container {
   
   
  display: inline-flex; /* 行内Flex容器 */
}

2. flex-direction: row | row-reverse | column | column-reverse

这个属性决定主轴的方向，也就是项目的排列方向。

.container {
   
   
  display: flex;
  flex-direction: row; /* 默认值，水平从左到右 */
  /* flex-direction: row-reverse; */ /* 水平从右到左 */
  /* flex-direction: column; */ /* 垂直从上到下 */
  /* flex-direction: column-reverse; */ /* 垂直从下到上 */
}

在实际项目中，我经常使用column来创建垂直布局的表单或菜单，而row则用于横向的导航栏或产品列表。例如，在一个响应式导航中，桌面版使用row，而移动版则切换为column：

/* 桌面导航 */
@media (min-width: 768px) {
   
   
  .nav {
   
   
    flex-direction: row;
  }
}

/* 移动导航 */
@media (max-width: 767px) {
   
   
  .nav {
   
   
    flex-direction: column;
  }
}

3. flex-wrap: nowrap | wrap | wrap-reverse

当Flex项目太多，一行放不下时，是否允许换行？

.container {
   
   
  display: flex;
  flex-wrap: nowrap; /* 默认值，不换行 */
  /* flex-wrap: wrap; */ /* 允许换行 */
  /* flex-wrap: wrap-reverse; */ /* 换行并颠倒行顺序 */
}

flex-wrap: wrap在电商网站的商品列表中特别有用。想象一下，你的页面宽度变化时，商品卡片需要自动调整每行显示的数量：

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

.product-card {
   
   
  flex: 0 0 calc(33.333% - 20px); /* 三列布局 */
  margin: 10px;
}

@media (max-width: 768px) {
   
   
  .product-card {
   
   
    flex: 0 0 calc(50% - 20px); /* 平板上变为两列 */
  }
}

@media (max-width: 480px) {
   
   
  .product-card {
   
   
    flex: 0 0 100%; /* 手机上变为单列 */
  }
}