CSS Flexbox 实战

实战四连

理论讲了三篇，这一篇全部用来做实战。四个场景在真实项目中出镜率极高，水平垂直居中、等高列、粘性页脚、响应式卡片。最后再讲一个必须知道的坑。

水平垂直居中

Flexbox 让居中变成最简单的事情。假设结构是一个容器 div 套一个内容 div，class 分别叫 center-box 和 content。方案一，容器上同时写 justify-content 和 align-items。

.center-box {
  display: flex;
  justify-content: center;   /* 水平居中 */
  align-items: center;       /* 垂直居中 */
}

.center-box-2 {
  display: flex;
}

.content-2 {
  margin: auto;   /* 两轴全部居中，一行搞定 */
}

方案二，只写一行 justify-content，然后给项目一个 margin: auto。在 flex 容器里，margin: auto 会把项目在主轴和交叉轴上都居中，这是传统布局里做不到的。同一份结构，class 换成 center-box-2 和 content-2 就是方案二。

两种方案都行，方案一语义更清晰，方案二更省代码。注意 margin: auto 在 flex 里的行为，多余的空白会被自动 margin 吃掉，项目自然居中。

等高列

三列卡片，内容长短不一，普通布局里列的高度各管各的，底部参差不齐。Flexbox 里这根本不是问题，align-items 默认值是 stretch，项目自动拉伸到容器高度，三列天然等高。结构是三个 class 为 col 的 div，放在 class 为 columns 的容器里。

.columns {
  display: flex;
  /* 不写 align-items，stretch 自动等高 */
}

.col {
  flex: 1;
  padding: 16px;
}

对比一下普通布局，块级元素高度只跟自身内容相关，想等高要么用表格布局，要么自己量高度，又脆又难维护。Flexbox 一行代码都不用多写，等高是白送的。

粘性页脚

页面内容太少时，页脚会跟着内容跑到页面中间，下面留一大片空白。粘性页脚的意思就是，内容不足一屏时页脚也贴住屏幕底部，内容超出一屏时页脚正常跟着走。

body {
  display: flex;
  flex-direction: column;  /* 页面按纵向排 */
  min-height: 100vh;       /* 至少一屏高 */
}

.content {
  flex: 1;                 /* 内容区吃掉多余空间 */
}

原理很简单，页面容器至少一屏高，纵向排列，内容区 flex: 1 会把多余空间全部吃掉，页脚就被顶到最底下。内容多的时候页面自然变长，页脚跟在末尾，不用做任何判断。

响应式卡片网格

卡片列表在桌面端一行三张，窄屏自动换行，这是 flex-wrap 加基准宽度的经典组合。

.card-list {
  display: flex;
  flex-wrap: wrap;         /* 放不下就换行 */
  gap: 16px;
}

.card {
  flex: 1 1 200px;         /* 基准 200px，空间够就放大 */
}

flex: 1 1 200px 是这里的关键，展开是 flex-grow 1、flex-shrink 1、flex-basis 200px。每张卡片基准 200px，空间够就均分放大，不够就换行，浏览器宽度变了布局自动跟着变。想看更精细的控制，也可以把 flex-basis 换成百分比。

常见坑，min-width 的默认值

最后一个坑必须单独讲。flex 项目有个默认的 min-width: auto，意思是项目至少不能比内容小。于是嵌套内容很宽时，比如一个很长的英文单词或者一张大图，项目死也不肯被压缩，把容器撑破，wrap 也不换行。

.container {
  display: flex;
}

.child {
  min-width: 0;   /* 允许项目缩到比内容还小 */
}

设成 0 之后，项目就可以被正常压缩和换行。遇到”flex 布局里内容把容器撑爆”的问题，第一反应就检查 min-width，加 min-width: 0 是业内标准解法。很多坑都是默认值造成的，弄清默认值比背技巧更重要。

小结

四个场景覆盖了 Flexbox 最常用的日常用法。居中两个方案选一个顺手的，等高列是默认行为白送的，粘性页脚记 min-height 加 flex: 1 的组合，响应式卡片记 flex-wrap 加 flex: 1 1 基准值，再加上 min-width: 0 这个救火技巧，Flexbox 四篇就此完整收官。接下来学 Grid 时你会发现，二维的世界里这些概念会以新面貌再次出现。

CSS Flex 项目属性

CSS Grid 初识