🧱 一文搞懂 Flex 布局：移动端开发的“万能钥匙”在现代前端开发中，弹性布局（Flexbox）已经成为构建响应式

在现代前端开发中，弹性布局（Flexbox） 已经成为构建响应式页面的“标配”。无论是移动端还是 PC 端，它都能轻松实现复杂的对齐、分布和自适应布局。

今天，我们就来深入解析 Flex 的核心原理，结合真实代码示例，带你彻底掌握这个“布局神器”。

🔍 什么是 Flex 布局？

Flex 是 CSS3 中用于一维布局的模块，全称是 Flexible Box Layout Module。

它的核心思想是：让容器内的子元素自动伸缩、对齐、分配空间，无需固定尺寸或浮动，大大简化了复杂布局的实现。

✅ 核心优势

一行代码搞定居中
自动分配剩余空间
支持多方向排列（水平/垂直）
移动端适配友好
不破坏文档流

🎯 如何启用 Flex 布局？

只需给父容器设置：

display: flex;

这句话开启了“弹性格式化上下文”，意味着该容器变成了一个 flex 容器，其子元素变为 flex 项目（flex items） 。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

此时，.item 元素就会按照 Flex 规则进行排列。

🧩 Flex 的三大核心属性

1. `flex-direction` —— 排列方向

决定主轴（main axis）的方向：

flex-direction: row;     /* 默认，从左到右 */
flex-direction: column;  /* 从上到下 */
flex-direction: row-reverse;  /* 反向水平 */
flex-direction: column-reverse; /* 反向垂直 */

💡 默认值是 row，也就是水平排列。

2. `justify-content` —— 主轴对齐方式

控制子元素在 主轴上的对齐方式（水平方向）

justify-content: flex-start;    /* 左对齐 */
justify-content: flex-end;      /* 右对齐 */
justify-content: center;        /* 居中 */
justify-content: space-between; /* 两端对齐，间距相等 */
justify-content: space-around;  /* 均匀分布，首尾有半倍间距 */

✅ 实战示例：水平居中 + 两端留白

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

3. `align-items` —— 侧轴对齐方式

控制子元素在 侧轴（cross axis）上的对齐方式（垂直方向）

align-items: flex-start;    /* 顶部对齐 */
align-items: flex-end;      /* 底部对齐 */
align-items: center;        /* 垂直居中 */
align-items: baseline;      /* 文本基线对齐 */
align-items: stretch;       /* 拉伸填满，默认值 */

✅ 实战示例：垂直居中

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

⚠️ 注意：align-items 是针对所有子元素的统一对齐，若需单独控制某个子元素，使用 align-self。

🧰 实战：常见布局场景

🌐 场景 1：水平居中 + 垂直居中

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

一句话解决“居中难题”！

📱 场景 2：导航栏布局（左右对齐）

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav .logo { width: 100px; }
.nav .menu { margin-left: auto; }

🧩 场景 3：等比例分配空间

.container {
  display: flex;
}

.item {
  flex: 1; /* 等比例分配剩余空间 */
}

flex: 1 相当于 flex-grow: 1，表示“我愿意扩展”。

🔁 场景 4：嵌套 Flex 布局

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

.panel .header {
  flex: 0 0 auto; /* 不拉伸，固定高度 */
}

.panel .content {
  flex: 1; /* 占据剩余空间 */
}

✅ 嵌套使用时，父子层级都可以独立设置 flex 属性。

🔄 高级技巧：`&.active` 与状态嵌套

你可能见过这样的写法：

.panel
  &.active
    background #007bff

这其实是 CSS 嵌套语法（如 Stylus、Sass 支持），表示 .panel.active 的样式。

在 Flex 布局中，也可以这样用：

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

.panel.active {
  background-color: #007bff;
  border: 2px solid #0056b3;
}

✅ 通过类名组合控制不同状态下的布局表现。

📌 总结：Flex 布局核心要点

属性	作用
`display: flex`	启用弹性布局
`flex-direction`	设置主轴方向（row/column）
`justify-content`	主轴对齐（水平）
`align-items`	侧轴对齐（垂直）
`flex: 1`	子元素等比例分配空间
`&.active`	状态嵌套，灵活控制样式

💡 记住一句话：Flex 是“父控子”的布局模式，一切从 display: flex 开始。

✨ 写在最后

Flex 布局虽然简单，但威力巨大。它是移动端开发的“主角”，也是现代 UI 设计的基础工具之一。

无论你是刚入门的新手，还是想优化现有项目的开发者，掌握 Flex 都能让你的布局能力提升一个档次。

📌 推荐练习：

尝试用 Flex 实现一个三栏布局
用 space-between + align-items: center 实现导航栏
使用 flex: 1 实现卡片等宽分布

💬 如果你在使用 Flex 时遇到过坑，比如“为什么子元素不居中？”、“flex-wrap 什么时候生效？”，欢迎在评论区留言讨论！

🧱 一文搞懂 Flex 布局：移动端开发的“万能钥匙”