CSS Flexbox 布局实战总结

Flexbox（弹性盒子布局）是现代 CSS 中最强大的布局工具之一。它解决了传统布局中很多令人头疼的问题，比如垂直居中、等分布局、自适应排列等。这篇文章通过几个常见的实际案例，系统总结 Flexbox 的核心属性和组合用法。

Flexbox 基本概念

要使用 Flexbox，首先需要创建一个弹性容器。只需要在父元素上设置 display: flex，其直接子元素就会变成弹性项目（flex items）。

.container {
  display: flex;
}

Flexbox 有两个方向的概念：

• 主轴（main axis）：默认是水平方向，由 flex-direction 控制
• 交叉轴（cross axis）：垂直于主轴的方向

容器属性详解

justify-content - 主轴对齐

控制弹性项目在主轴上的对齐方式：

.container {
  display: flex;
  justify-content: center;     /* 居中 */
  justify-content: space-between; /* 两端对齐，中间间距相等 */
  justify-content: space-around;  /* 每项两侧间距相等 */
  justify-content: space-evenly;  /* 所有间距完全相等 */
}

align-items - 交叉轴对齐

控制弹性项目在交叉轴上的对齐方式：

.container {
  display: flex;
  align-items: center;    /* 垂直居中 */
  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end;   /* 底部对齐 */
  align-items: stretch;    /* 拉伸填满（默认值） */
}

flex-wrap - 换行控制

默认情况下，弹性项目会尝试挤在一行内。设置 flex-wrap 可以允许换行：

.container {
  display: flex;
  flex-wrap: wrap;      /* 允许换行 */
  flex-wrap: nowrap;    /* 不换行（默认） */
}

项目属性详解

flex-grow - 放大比例

定义弹性项目在剩余空间中的放大比例。默认为 0，表示不放大。

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

flex-shrink - 缩小比例

当空间不足时，定义项目的缩小比例。默认为 1。

flex-basis - 基础尺寸

项目在分配多余空间前的原始大小：

.item {
  flex-basis: 200px;   /* 固定基础宽度 */
  flex-basis: auto;    /* 使用项目自身宽度（默认） */
}

flex 简写

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写：

.item {
  flex: 1;           /* 等价于 1 1 0% */
  flex: 0 0 auto;    /* 固定尺寸，不放大不缩小 */
  flex: 1 1 200px;   /* 基础200px，可放大缩小 */
}

实战案例

案例一：导航栏布局

左侧 logo，右侧导航链接，两端对齐：

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

.nav-links {
  display: flex;
  gap: 1.5rem;
}

案例二：卡片等分布局

三列卡片自动换行，间距均匀：

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 250px;
}

案例三：垂直居中

经典的水平垂直居中方案：

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

案例四：底部固定布局

页脚始终在页面底部，内容不足一屏时也不上浮：

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}

常见陷阱

• margin-auto 技巧：在 flex 容器中，给某个子元素设置 margin-left: auto 可以将其推到右侧
• min-width: 0：当 flex 子项包含长文本或表格时，可能需要设置 min-width: 0 来允许收缩
• gap 兼容性：flex gap 在现代浏览器中已良好支持，但旧版本可能需要使用 margin 替代方案

Flexbox 最适合一维布局（行或列）。当你需要同时控制行和列的复杂二维布局时，考虑使用 CSS Grid。

总结

Flexbox 的核心优势在于它的灵活性和简洁性。掌握了 justify-content、align-items 和 flex 这几个核心属性，就能解决大部分日常布局需求。建议在实际项目中多练习，逐渐形成肌肉记忆。

下次文章我们会探讨 CSS Grid 布局，它与 Flexbox 互补，适合更复杂的二维布局场景。