3、Flexbox实战：骰子布局、圣杯布局、导航栏布局、卡片列表布局

Flexbox这东西，说实话刚出来的时候我还有点抵触。心想「不就布局嘛，float加定位也能搞定」。直到我在一个移动端项目里被各种百分比和负margin折磨得够呛，才老老实实去啃了Flexbox规范。嗯，真香。

今天咱们直接上硬菜——四个最经典的实战场景。你把这四个吃透了，市面上90%的界面布局都能手到擒来。

3.1 骰子布局：Flexbox的「点」到为止

骰子布局是理解Flexbox对齐机制的最佳入门。说白了，就是在一个容器里把几个点（圆点）摆到指定位置。

先看一个最简单的——骰子「1」点：

.dice-one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 12px;
}

.dot {
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
}

就三行核心代码，点就居中了对吧？justify-content管水平，align-items管垂直。

那骰子「2」点呢？两个点要斜对角分布。这时候就要用到flex-direction和justify-content的组合了：

.dice-two {
  display: flex;
  justify-content: space-between;
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 12px;
}

.dice-two .dot:first-child {
  align-self: flex-start;
}

.dice-two .dot:last-child {
  align-self: flex-end;
}

这里有个小技巧——align-self可以覆盖父容器的align-items，让单个子元素独立对齐。我在做表单校验图标对齐时经常用这招。

3.2 圣杯布局：三栏结构的终极解法

圣杯布局，就是左右固定宽度、中间自适应的三栏结构。以前用float做，要写一堆清除浮动的代码。用Flexbox？几行搞定。

.holy-grail {
  display: flex;
  min-height: 100vh;
}

.holy-grail .sidebar-left {
  width: 200px;
  background: #f0f0f0;
}

.holy-grail .sidebar-right {
  width: 200px;
  background: #f0f0f0;
}

.holy-grail .main {
  flex: 1;
  background: #fff;
}

注意看flex: 1这行。它是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的缩写。意思是「把剩余空间全吃下」。左右各200px固定，中间自动填满。

如果要做响应式，加个媒体查询就行：

@media (max-width: 768px) {
  .holy-grail {
    flex-direction: column;
  }
  
  .holy-grail .sidebar-left,
  .holy-grail .sidebar-right {
    width: 100%;
  }
}

小屏时变成上下堆叠，完美。

3.3 导航栏布局：Logo + 菜单 + 按钮

导航栏是每个网站的门面。常见的结构是：左边Logo，中间菜单项，右边登录/注册按钮。用Flexbox做这个，简直不要太舒服。

.navbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background: #2c3e50;
}

.navbar .logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.navbar .menu {
  display: flex;
  gap: 20px;
  margin: 0 auto;  /* 关键：让菜单居中 */
  list-style: none;
}

.navbar .actions {
  display: flex;
  gap: 10px;
}

这里有个细节——margin: 0 auto在Flexbox里会让元素在主轴方向居中。左边Logo固定，右边按钮固定，中间菜单自动居中。你想想看，用float做这个得多费劲？

3.4 卡片列表布局：网格与流式布局

卡片列表是Flexbox的拿手好戏。不管是商品列表、文章列表还是用户卡片，核心就两个需求：等高等宽、自动换行。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1 1 300px;  /* 基础宽度300px，可伸缩 */
  max-width: 400px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

flex: 1 1 300px的意思是：flex-grow: 1（可以放大）、flex-shrink: 1（可以缩小）、flex-basis: 300px（理想宽度300px）。配合flex-wrap: wrap，卡片会自动换行，而且每一行的高度会自动对齐。

为什么卡片能等高？因为Flexbox默认align-items: stretch，所有子元素在交叉轴方向会被拉伸到同一高度。这个特性在做卡片列表时特别有用——你不用再手动计算高度了。

知识体系总览

下面这张图帮你理清Flexbox实战的核心脉络：

这四个布局覆盖了Flexbox最核心的应用场景。骰子布局练对齐，圣杯布局练自适应，导航栏练居中与间距，卡片列表练换行与等高。你把这四个吃透了，以后遇到任何布局需求，第一反应就是「用Flexbox能不能搞定？」——大部分情况下，答案是肯定的。

好了，这一章就到这儿。代码都给你了，去试试吧。