第六章：Flexbox 核心概念与实战——构建现代响应式布局

Flexbox（弹性盒子布局）是 CSS 中最实用的布局模块之一。它通过定义主轴和交叉轴，让元素能够根据容器空间自动调整尺寸，实现真正意义上的自适应布局。

本章将系统讲解 Flexbox 的核心概念、常见问题与解决方案，并通过一个完整的响应式导航栏实战案例，带你掌握这一现代布局利器。

---

1. Flexbox 核心概念

Flexbox 布局基于容器（flex container） 和 项目（flex items） 的关系。

① 主轴（Main Axis）与 交叉轴（Cross Axis）

• 主轴：flex 项目排列的方向（默认为水平 row）。
• 交叉轴：垂直于主轴的方向（默认为垂直 column）。

.container {
  display: flex;
  flex-direction: row; /* 主轴：水平（默认） */
  /* flex-direction: column; 主轴：垂直 */
}

✅ 口诀：主轴是“主方向”，交叉轴是“副方向”。

② flex-grow, flex-shrink, flex-basis

这三个属性共同控制 flex 项目的尺寸行为。

属性	作用
flex-grow	定义项目放大比例（剩余空间分配）。默认 0（不放大）
flex-shrink	定义项目缩小比例（空间不足时）。默认 1（可缩小）
flex-basis	定义项目在分配剩余空间前的初始大小。可为 auto、0 或具体值（如 200px）

.item {
  flex: 1 1 200px; /* 等价于： */
  /* flex-grow: 1; */
  /* flex-shrink: 1; */
  /* flex-basis: 200px; */
}

✅ 常用简写：

• flex: 1 → flex: 1 1 0
• flex: auto → flex: 1 1 auto
• flex: none → flex: 0 0 auto（不伸缩）

---

2. 如何实现自适应布局？

Flexbox 的“弹性”特性使其天生适合响应式设计。

场景 1：三栏布局，中间自适应

.container {
  display: flex;
}

.sidebar-left {
  flex: 0 0 200px; /* 固定宽度，不伸缩 */
}

.main {
  flex: 1; /* 自动填充剩余空间 */
}

.sidebar-right {
  flex: 0 0 150px;
}

场景 2：等宽卡片，自动换行

.card-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* 最小 300px，可伸缩 */
}

---

3. 常见问题与解决方案

问题 1：子元素溢出容器，overflow: hidden 失效？

原因：flex 项的 min-width 默认为 auto，阻止其收缩到内容最小宽度以下。

解决方案：

.item {
  min-width: 0; /* 允许收缩 */
  overflow: hidden;
  text-overflow: ellipsis;
}

✅ 关键：min-width: 0 解除内容最小宽度限制。

问题 2：如何让子元素垂直居中？

使用 align-items（交叉轴）和 justify-content（主轴）：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 400px; /* 必须有明确高度 */
}

✅ 前提：容器必须有明确的高度。

问题 3：Flexbox 在不同浏览器中的兼容性问题

浏览器	支持情况
Chrome ≥ 29	完整支持
Firefox ≥ 28	完整支持
Safari ≥ 9	完整支持
Edge ≥ 12	完整支持
IE 11	部分支持（旧语法，bug 多）
IE ≤ 10	不支持

IE 11 修复技巧：

• 使用 min-width: 0 修复 flex: 1 异常
• 为 flex-direction: column 的容器设置 min-height
• 使用 Autoprefixer 添加 -ms- 前缀

.container {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-align: center; /* IE 10 */
  align-items: center;
}

---

4. 实战案例：构建一个响应式的导航栏

HTML 结构

<nav class="navbar">
  <div class="nav-logo">Brand</div>
  <ul class="nav-menu">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
  <div class="nav-toggle" id="mobile-menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</nav>

CSS 样式（移动优先）

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  color: white;
  padding: 1rem 2rem;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
}

/* 移动端：隐藏菜单，显示汉堡按钮 */
@media (max-width: 480px) {
  .nav-toggle {
    display: flex;
  }
  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #333;
  }
  .nav-menu.active {
    display: flex;
  }
}

JavaScript 交互

document.getElementById('mobile-menu').addEventListener('click', () => {
  document.querySelector('.nav-menu').classList.toggle('active');
});

---

结语：Flexbox 是现代布局的基石

Flexbox 以其简单、强大、响应式的特性，彻底改变了 CSS 布局方式。
掌握其核心概念（主轴/交叉轴、flex 属性）和常见问题（溢出、居中、兼容性），你就能轻松构建从按钮组到完整页面的任何一维布局。

下一章，我们将进入“CSS Grid：二维布局的完全控制”。