用 CSS Flexbox 实现常见页面布局

01理解两个方向

为容器设置 display: flex 后，子元素会沿主轴排列。默认主轴是水平方向，交叉轴是垂直方向。justify-content 控制主轴上的空间分配，align-items 控制交叉轴上的对齐方式。

02让卡片自动换行

使用 gap 设置卡片间距，使用 flex-wrap 允许换行。flex 的三个参数依次表示放大比例、缩小比例与基础尺寸。下面的卡片以 260px 为基础宽度，并分配剩余空间。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 260px;
  min-width: 0;
}

03兼顾窄屏阅读

页面容器可以设置最大宽度，同时保留两侧内边距。不要依赖固定高度容纳文字，避免内容增加后溢出。对于长链接或代码，可分别使用 overflow-wrap 和横向滚动处理。

04检查布局结果

分别在手机宽度、平板宽度和桌面宽度下检查页面。观察卡片是否换行、文本是否溢出、按钮是否容易点击。浏览器开发者工具中的 Flex 布局辅助线可以帮助确认对齐和间距。