🧠 什么是 Flexbox？
Flexbox 全称 Flexible Box Layout Module，是 CSS3 引入的一种一维布局模型。传统的块级布局（block + inline + float）在处理垂直居中和自适应排列时非常困难，而 Flexbox 让这些操作变得极其简单。当你给一个容器设置 display: flex 后，它的子元素会自动沿着主轴排列，容器也会获得强大的对齐和分配空间的能力。
Flexbox 最核心的理念是「弹性」—— 子元素可以伸缩以填满可用空间，也可以收缩以避免溢出。这使得 Flexbox 成为构建响应式布局的首选方案之一。目前所有现代浏览器都完整支持 Flexbox，包括移动端。
🔧 Flexbox 的两根轴线
理解 Flexbox 必须先理解「主轴」（main axis）和「交叉轴」（cross axis）这两个概念：
- 主轴 — Flex 项目排列的方向。默认是水平方向（从左到右）。
- 交叉轴 — 与主轴垂直的方向。默认是垂直方向（从上到下）。
这两个轴可以通过 flex-direction 属性来切换。当你把 flex-direction 设为 column 时，主轴就变成了垂直方向。
💡 小贴士： 牢记「主轴」和「交叉轴」的关系，就能轻松理解所有 Flexbox 属性的作用对象。justify-content 控制主轴，align-items 控制交叉轴。
1️⃣ display: flex — 开启弹性布局
一切从 display: flex 开始。当一个容器获得这个属性后，它的直接子元素会变成 Flex 项目，默认水平排列。让我们看一个最基础的例子：
<div style="display: flex;">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
</div>
就这么简单！三个 div 默认是块级元素（每个占一行），但在 Flex 容器中它们会自动变成水平排列。
2️⃣ justify-content — 主轴对齐方式
justify-content 控制项目在主轴上的对齐方式，是 Flexbox 最常用的属性之一。
flex-start（默认）— 从起始位置开始排列center— 水平居中（最常用的居中方案之一）space-between— 两端对齐，项目之间间距相等space-around— 每个项目两侧间距相等flex-end— 从末尾位置开始排列
.container {
display: flex;
justify-content: center; /* 水平居中 */
/* 其他选项：flex-start | flex-end | space-between | space-around */
}
上面演示区中已经展示了 center 和 space-between 的效果。你可以在自己的代码中尝试其他值。
3️⃣ align-items — 交叉轴对齐方式
align-items 控制项目在交叉轴（默认垂直方向）上的对齐方式：
stretch（默认）— 拉伸填满容器高度center— 垂直居中（经典垂直居中方案！）flex-start— 顶部对齐flex-end— 底部对齐
.container {
display: flex;
align-items: center; /* 垂直居中 */
height: 200px;
}
align-items: center 配合 justify-content: center 可以实现经典的水平垂直居中，这是 Flexbox 最强大的特性之一。
4️⃣ flex-wrap — 换行控制
默认情况下，所有 Flex 项目会挤在一行内。当项目总宽度超过容器宽度时，可以用 flex-wrap 让它们换行：
nowrap（默认）— 不换行，项目可能会被压缩wrap— 自动换行，项目保持原始尺寸wrap-reverse— 反向换行
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 1rem; /* 项目间距 */
}
flex-wrap: wrap 在构建响应式卡片网格时非常有用 — 当屏幕变窄时，卡片自动换行排列。
5️⃣ flex — 弹性伸缩
flex 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写。它控制项目如何伸缩以填满或适应空间：
.item {
flex: 1; /* 等价于 flex: 1 1 0% */
/* 所有设为 flex:1 的项目会等分剩余空间 */
}
.item-large {
flex: 2; /* 占双倍空间 */
}
当多个项目都设了 flex: 1，它们会等分容器的剩余宽度。如果给某个项目设 flex: 2，它占的空间会是其他项目的两倍。这是实现等分布局和自适应导航栏的利器。
6️⃣ gap — 项目间距
在 Flexbox 中设置项目间距，最推荐的方式是使用 gap 属性。它取代了传统的 margin 方式，不会造成多余的边距问题：
.container {
display: flex;
gap: 1rem; /* 项目之间 16px 间距 */
/* gap: 1rem 2rem; 行间距 16px，列间距 32px */
}
gap 属性也适用于 Grid 布局，是 CSS 布局中非常实用的糖语法属性。
📝 完整实战：导航栏 + 卡片列表
让我们用 Flexbox 构建一个完整的实战页面。这个示例包含一个水平导航栏和一组自适应卡片：
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #f8f9fa; }
/* 导航栏 — Flexbox 经典应用 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #1f2937;
color: white;
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
.nav-links a {
color: #d1d5db;
text-decoration: none;
}
.nav-links a:hover { color: white; }
/* 卡片网格 — Flexbox + wrap 实现响应式 */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.card {
flex: 1 1 300px; /* 最小 300px，可伸缩 */
background: white;
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card h3 { margin-bottom: 0.5rem; }
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">MySite</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
<div class="card-grid">
<div class="card">
<h3>响应式设计</h3>
<p>Flexbox 让响应式卡片布局变得非常简单。</p>
</div>
<div class="card">
<h3>弹性伸缩</h3>
<p>卡片自动适应容器宽度，优雅换行。</p>
</div>
<div class="card">
<h3>零依赖</h3>
<p>纯 CSS 实现，无需任何框架。</p>
</div>
</div>
</body>
</html>
这个例子中，导航栏用 justify-content: space-between 实现了 Logo 和菜单项的两端对齐，卡片网格用 flex-wrap: wrap 实现了响应式换行。当屏幕变窄时，卡片自动从三列变成两列再到一列 — 不需要任何媒体查询！
🎯 总结与最佳实践
Flexbox 是现代 CSS 布局的必备技能。以下是几个核心要点：
- 一维布局 — Flexbox 擅长处理行或列的单方向排列。
- 居中利器 —
justify-content: center+align-items: center是最简单的居中方案。 - 结合 wrap —
flex-wrap: wrap+flex: 1 1 minWidth可以构建纯 CSS 响应式网格。 - gap 代替 margin — 使用
gap设置项目间距，避免外边距重叠问题。 - 浏览器兼容 — Flexbox 支持所有现代浏览器，可放心使用。
掌握了 Flexbox，你就已经掌握了 80% 的日常布局需求。接下来可以学习 CSS Grid 来处理更复杂的二维布局场景。