CSS 入门实战用 Flexbox 做一个自适应卡片布局

做网页布局时，新手最头疼的就是“怎么让几个盒子排整齐，手机上还不乱”。Flexbox 就是专门解决这个问题的布局方式：只要给父容器加一行 display: flex，里面的盒子就能自动排列、对齐、换行。本文从最简单的横向排列讲起，到居中、等分、换行和手机适配，照着敲就能做出一个能看的卡片列表。

先理解 Flexbox 的核心思路：它不是给每个盒子单独算位置，而是给它们的父容器定规则，子盒子按规则自动排。比如一个列表里有 4 张卡片，你想让它们横着排、间距均匀，以前要算宽度、算浮动，很容易算错；用 Flexbox，只要在父容器上写 display: flex，默认就是横向排列，剩下的交给它处理。

最简单的例子是这样的：

.container {    display: flex;    gap: 16px;}

gap 是卡片之间的间距，不用再给每个卡片单独设 margin，间距统一、好改。子盒子默认会按内容高度自动拉伸，看起来整齐；想让它们高度不一致时也对齐顶部，可以加 align-items: flex-start，想垂直居中就用 align-items: center。

接下来是等分。想让 3 张卡片平分一行宽度，给每个子盒子写 flex: 1 就可以了，不管屏幕多宽，它们都各占三分之一。想让某一块宽一点、某一块窄一点，就改数字：主内容 flex: 2，侧边栏 flex: 1，比例就是 2:1，改数字就能调布局，不用再算百分比。

居中是 Flexbox 最出名的用法。以前想让一个盒子在页面正中间，又要算宽高、又要写定位，很麻烦；现在只要两行：

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

justify-content 管横向对齐，align-items 管纵向对齐，两个都写 center，盒子就稳稳站在正中间。登录框、弹窗、空状态提示，都是这个套路。

手机适配也靠它。屏幕变窄时，横向排不下的卡片会挤在一起，这时给父容器加 flex-wrap: wrap，允许换行，卡片就会自动掉到下一行，不会溢出屏幕。再配合媒体查询，手机上把每张卡片改成 flex: 1 1 100%，一行只放一张，桌面上多张并排、手机上一张一行，一套代码就适配了两种屏幕。

新手最常踩的坑有三个。第一是只给子盒子写 flex，忘了父容器要先写 display: flex，子盒子的规则不生效就是这个原因。第二是把 justify-content 和 align-items 记反：前者是主轴方向（默认横向），后者是交叉轴方向（默认纵向），方向一换，两个的作用也跟着换。第三是卡片内容太长把布局撑爆，文字不换行、图片没设最大宽度都会这样，给图片加 max-width: 100%，长文本加 overflow-wrap: anywhere，布局就稳了。