Flexbox（弹性盒子布局）是 CSS3 提供的一种强大的布局方式，专门用来解决传统布局（如浮动、定位）的痛点。它能让元素在容器内自动伸缩、对齐、换行，轻松实现各种复杂布局。

一、Flexbox 的核心概念

1. 什么是 Flexbox？

想象一个可以伸缩的弹簧盒子，里面的子元素可以自动调整大小、对齐、排列，而无需手动计算宽度或使用 float 和 clear。

2. 基本结构

Flexbox 由 Flex 容器（父元素） 和 Flex 项目（子元素） 组成：

<div class="flex-container">  <!-- Flex 容器 -->
  <div class="flex-item">1</div>  <!-- Flex 项目 -->
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;  /* 关键！让容器变成 Flexbox */
}

二、Flex 容器的属性（控制整体布局）

1. display: flex

• 作用：让元素变成 Flex 容器，子元素自动变成 Flex 项目。
• 示例：

.container { display: flex; /* 水平排列，默认不换行 */ }

2. flex-direction（主轴方向）

• 作用：决定 Flex 项目的排列方向（水平 or 垂直）。
• 可选值：值效果row（默认）水平排列（左→右）row-reverse水平反向（右→左）column垂直排列（上→下）column-reverse垂直反向（下→上）示例：

.container { display: flex; flex-direction: column; /* 垂直排列 */ }

3. justify-content（主轴对齐）

• 作用：控制 Flex 项目在主轴（水平方向）的对齐方式。
• 可选值：值效果flex-start（默认）左对齐flex-end右对齐center居中space-between两端对齐，项目间距相等space-around项目两侧间距相等space-evenly所有间距（包括边缘）相等示例：

.container { display: flex; justify-content: center; /* 水平居中 */ }

4. align-items（交叉轴对齐）

• 作用：控制 Flex 项目在交叉轴（垂直方向）的对齐方式。
• 可选值：值效果stretch（默认）拉伸填满容器高度flex-start顶部对齐flex-end底部对齐center垂直居中baseline按文字基线对齐示例：

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

5. flex-wrap（是否换行）

• 作用：控制 Flex 项目是否换行（默认不换行）。
• 可选值：值效果nowrap（默认）不换行（可能溢出）wrap换行（从上到下）wrap-reverse反向换行（从下到上）示例：

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

三、Flex 项目的属性（控制单个项目）

1. flex-grow（放大比例）

• 作用：定义 Flex 项目的放大比例（默认 0，不放大）。
• 示例：

.item { flex-grow: 1; /* 所有项目平分剩余空间 */ }

2. flex-shrink（缩小比例）

• 作用：定义 Flex 项目的缩小比例（默认 1，可缩小）。
• 示例：

.item { flex-shrink: 0; /* 禁止缩小（保持固定宽度） */ }

3. flex-basis（初始大小）

• 作用：定义 Flex 项目的初始宽度（类似 width）。
• 示例：

.item { flex-basis: 200px; /* 初始宽度 200px */ }

4. flex（简写属性）

• 作用：flex-grow + flex-shrink + flex-basis 的简写。
• 常用写法：

.item { flex: 1; /* 相当于 flex: 1 1 0 */ }

5. align-self（单独对齐）

• 作用：覆盖 align-items，单独设置某个 Flex 项目的对齐方式。

示例：

.item { align-self: flex-end; /* 单独底部对齐 */ }

四、Flexbox 实战案例

案例 1：导航栏（水平居中 + 自适应）

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

.navbar {
  display: flex;
  justify-content: center;  /* 水平居中 */
  gap: 20px;  /* 项目间距 */
}

案例 2：卡片布局（自动换行 + 等宽）

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

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

.card {
  flex: 1;  /* 自动填满剩余空间 */
  min-width: 200px;  /* 最小宽度 */
}

案例 3：圣杯布局（Header + Main + Footer）

<div class="layout">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.layout {
  display: flex;
  flex-direction: column;  /* 垂直排列 */
  min-height: 100vh;  /* 至少占满整个屏幕 */
}

main {
  flex: 1;  /* 自动撑满剩余空间 */
}

五、Flexbox 常见问题

1. Flexbox vs. Grid（该用哪个？）

• Flexbox：适合一维布局（横向或纵向排列）。
• Grid：适合二维布局（行列同时控制）。

2. 浏览器兼容性

Flexbox 在现代浏览器（Chrome、Firefox、Edge、Safari）中支持良好，但旧版 IE（<11）需要前缀：

.container {
  display: -ms-flexbox;  /* IE10 */
  display: flex;
}

Flexbox 让布局变得极其简单!
下一节：CSS Grid 布局（更强大的二维布局