Flexbox 是现代 CSS 布局的主力方案：导航栏、卡片列表、居中对齐，几乎都离不开它。这篇文章用最短篇幅讲清楚 Flex 的核心概念和常用属性。

两个基本概念：主轴与交叉轴

开启 Flex 后，容器内部有两条看不见的轴：

  • 主轴：默认水平方向，子元素沿着它依次排列
  • 交叉轴：与主轴垂直的方向

所有对齐属性都围绕这两条轴工作，理解了轴，属性名就不难记了。

.container {
  display: flex;
}

容器上的常用属性

.container {
  display: flex;

  /* 主轴对齐：开头 | 居中 | 结尾 | 两端 | 均分 */
  justify-content: space-between;

  /* 交叉轴对齐：拉伸 | 居中 | 开头 | 结尾 */
  align-items: center;

  /* 放不下时换行 */
  flex-wrap: wrap;

  /* 子元素之间的间距 */
  gap: 16px;
}

经典的"水平垂直居中"，两行搞定：

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

子元素上的常用属性

.item {
  /* 放大：空间多余时按比例扩展，默认 0 */
  flex-grow: 1;

  /* 缩小：空间不足时允许收缩，默认 1 */
  flex-shrink: 1;

  /* 初始尺寸 */
  flex-basis: 200px;

  /* 上面三个的简写，最常用 */
  flex: 1;

  /* 单个子元素的交叉轴对齐 */
  align-self: flex-end;

  /* 排列顺序，数字越小越靠前 */
  order: -1;
}

实际项目里最常用的组合是 flex: 1：让某个元素吃掉剩余空间，比如"左侧固定、右侧自适应"的两栏布局。

.layout {
  display: flex;
}
.sidebar {
  width: 240px;   /* 固定宽度 */
}
.main {
  flex: 1;        /* 占满剩余空间 */
}

换行布局：自适应卡片列表

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  /* 每张卡片基准 200px，能放几张放几张 */
  flex: 1 1 200px;
}

配合 flex-wrap: wrap，不写媒体查询也能得到响应式的卡片列表。

改变主轴方向

.container {
  display: flex;
  flex-direction: column;   /* 主轴变为垂直方向 */
  justify-content: center;  /* 此时在垂直方向居中 */
  gap: 8px;
}

移动端"内容上下排列"的场景，用 column 加 gap 就很顺手。

小结

  • display: flex 开启布局，先想清楚主轴方向
  • 主轴对齐用 justify-content，交叉轴对齐用 align-items
  • 子元素记住一个 flex: 1，解决大部分伸缩需求
  • 用 gap 代替 margin 拼间距，代码更干净
  • 放不下就 flex-wrap: wrap

Flex 能覆盖八成日常布局，把这几个属性用熟，大部分页面骨架就搭起来了。