返回知识详解
HTML/CSS 基础

Flexbox 弹性布局

主轴与交叉轴、justify-content / align-items，以及 flex-grow/shrink/basis 的分配规则。

主轴与交叉轴

Flex 容器有两根轴：主轴由 flex-direction 决定，交叉轴与主轴垂直。

  • justify-content 控制主轴对齐
  • align-items 控制交叉轴对齐

下面的面板可实时调整这些属性，观察子项排列的变化。

⚡ 参数可调面板
1
2
3
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

flex 简写的陷阱

flex 是 flex-grow flex-shrink flex-basis 的简写。

  • flex: 1 = 1 1 0%：分配空间时不先扣除内容尺寸，按比例平分容器全部空间
  • flex: auto = 1 1 auto：先保留内容尺寸，再分配剩余空间
  • flex: none = 0 0 auto：完全不伸缩

这就是为什么多个 flex: 1 的项严格等宽，而 flex: auto 的项会因内容多少而不等宽。

学完了？做几道题巩固一下
针对「HTML/CSS 基础」范围练习