CSS Flexbox 布局实战：几个常用模式一次讲清

前端布局经历了 table、float、position 的黑暗时代，终于迎来了 Flexbox。这篇文章不讲文档，只讲几个实际项目中反复用到的布局模式。

水平居中 + 垂直居中

千古难题一行解决：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

不管子元素是文字、图片还是 div，统统居中。

左右两栏，左边固定右边自适应

经典 sidebar + content 布局：

.layout {
  display: flex;
}
.sidebar { width: 260px; flex-shrink: 0; }
.content { flex: 1; }

flex-shrink: 0 保证侧栏不缩水，flex: 1 让内容区占满剩余空间。

卡片列表自动换行

不用算宽度、不用媒体查询，flex-wrap 搞定：

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card { flex: 1 1 280px; }

每个卡片最小 280px，空间不够自动换行。gap 属性替代了 margin 的繁琐写法。

底部对齐

卡片里标题在上、按钮在底：

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

最后

Flexbox 的核心理念就一句话：容器控制子元素的排列方式。理解了主轴和交叉轴，剩下就是查文档的事了。配合 Gap 属性和 flex 缩写，大部分布局不需要再写 float 了。