CSS Flex 容器属性

承接上一篇

上一篇我们把容器和项目两个概念讲清楚了，这一篇专门讲写在 flex 容器上的属性。一共六个，名字记牢，flex-direction、flex-wrap、justify-content、align-items、align-content、gap。它们管的事情分三类，主轴方向、换行、对齐与间距。

flex-direction，决定主轴方向

flex-direction 决定主轴的方向，有四个值。

值	作用	注意事项
row	主轴从左到右，默认值	不写就是它
row-reverse	主轴从右到左	视觉顺序会反过来，最后一个项目跑最左边
column	主轴从上到下	项目变竖排
column-reverse	主轴从下到上	竖排且顺序颠倒

最常用的场景是竖排导航。PC 端侧边栏的菜单，就是 column 的典型应用。下面把换行规则也一起写上，方便对照。

.nav {
  display: flex;
  flex-direction: column;   /* 菜单项纵向排列 */
}

.nav a {
  padding: 10px 20px;
}

.card-list {
  display: flex;
  flex-wrap: wrap;      /* 放不下的卡片换到下一行 */
}

注意 row-reverse 不只是排列方向反过来，项目的视觉顺序也反了，DOM 里第一个元素会显示在最右边，而屏幕阅读器读出来的顺序不变，这里埋着无障碍的坑。

flex-wrap，允许换行

flex-wrap 管的是项目放不下了怎么办。

值	作用	注意事项
nowrap	不换行，默认值	空间不够时项目会被压缩
wrap	空间不够时换行	常用
wrap-reverse	换行且反向排列	用得少，了解即可

nowrap 的压缩行为是个大坑。容器宽度固定，项目总宽度超出，项目会缩到比内容还窄，文字被压扁。想让它换行，必须显式写 flex-wrap: wrap。

justify-content，主轴对齐

justify-content 管项目在主轴方向上的分布。先看三个简单值，flex-start 靠起点，flex-end 靠终点，center 居中。真正需要用心理解的是三个 space 系列，它们的间距差异很容易混。

值	效果	间距特征
space-between	两端贴边，中间均分	项目之间间距相等，但两侧没有间距
space-around	每个项目两侧等距	两端间距是项目间距的一半
space-evenly	所有间距完全相等	两端和中间间距一样，最均衡

用注释把差异标出来，假设项目间距设为 20px 来演示。

.container-1 {
  display: flex;
  justify-content: space-between;   /* 第一个贴左，最后一个贴右 */
}

.container-2 {
  display: flex;
  justify-content: space-around;    /* 项目两侧各有一份空白 */
}

.container-3 {
  display: flex;
  justify-content: space-evenly;    /* 所有空白完全相等 */
}

实际项目里 space-between 用得最多，比如导航栏，空间均匀摊开。space-around 和 space-evenly 的差别简单记，around 两边薄中间厚，evenly 全一样。

align-items，交叉轴对齐

align-items 管项目在交叉轴上的对齐，默认值是 stretch，即拉伸。也就是说，不写 align-items 时，项目会沿交叉轴方向拉伸填满容器高度，这就是等高列效果的来源。

值	效果	注意事项
stretch	拉伸填满交叉轴，默认值	项目没设固定高度时才生效
flex-start	顶部对齐	项目保持自身高度
flex-end	底部对齐	底部对齐场景不多见
center	交叉轴居中	垂直居中的方案之一

stretch 是默认行为，所以才有等高的列。容器有固定高度时，三个项目不管内容多少，高度都被拉满。下面的代码把 align-items 和 align-content 一起演示。

.banner {
  display: flex;
  align-items: center;   /* 文字在 banner 里垂直居中 */
  height: 120px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;  /* 多行之间拉开距离 */
}

align-content，多行整体分配

align-content 看起来和 justify-content 很像，但它是管多行项目的整体分布的。行数不足两行时不生效，这是最常见的一个坑。

对比一下，align-items 管单行内部项目的对齐，align-content 管多行之间怎么分布。拿不准就记住，只有 flex-wrap: wrap 且真的换行了，align-content 才起作用。

gap，项目间距

以前做间距，都是在项目上加 margin，再处理首尾项目的多余间距。gap 直接写在容器上，一劳永逸。

属性	作用
gap	主轴和交叉轴间距一起设
row-gap	行间距
column-gap	列间距

gap 支持两个值，gap: 20px 10px 这种写法，前面是行，后面是列。现代浏览器全支持，放心用。

.toolbar {
  display: flex;
  gap: 12px;            /* 按钮之间留 12px 间隔 */
}

小结

六个属性记一个口诀，方向、换行、三对齐、一间距。flex-direction 定方向，flex-wrap 定换行，justify-content 管主轴，align-items 管单行交叉轴，align-content 管多行分布，gap 管间距。下一篇把目光移到项目身上，讲 flex-grow、flex-shrink 这些弹性属性，CSS 属性关键字里学过的 auto、0 这些词会再次出场。

CSS flex布局基本概念

CSS Flex 项目属性