flex 弹性盒子

在线学习网站

• Flexbox Froggy
• Flex Box Adventure
• Flexbox Labs

⭐ flex 中的核心要素

1. 方向：flex-direction 定义主轴方向，决定了项目是水平排列还是垂直排列。
2. 主轴对齐：justify-content 管理项目在 主轴 上的对齐和分布。
3. 交叉轴对齐：align-items 管理项目在 交叉轴 上的对齐方式。

容器与轴

设置 display: flex 或 display: inline-flex 之后，容器的所有 直接子元素 都会变成 flex 项目。

容器内的一切都围绕着 主轴 和 交叉轴 进行布局。

flex-direction

可选值：

• row，（默认值）主轴为水平方向，交叉轴为垂直方向。
• column，主轴为垂直方向，交叉轴为水平方向。

justify-content

对齐类：

• flex-start（默认值）项目向主轴起点对齐。
• flex-end：项目向主轴终点对齐。
• center：项目在主轴上居中。

分布类：

• space-between：项目两端对齐，中间平分。
• space-around：项目两侧间距相等。
• space-evenly：所有间距完全相等。

align-items

• stretch（默认值）项目拉伸以填满容器（前提是项目没有固定高度）。
• flex-start：项目向交叉轴的起点对齐。
• flex-end：项目向交叉轴的终点对齐。
• center：项目在交叉轴上居中。

flex 弹性本质

flex-basic

基准宽度：空间分配的计算起点，元素的“理想”尺寸，

flex-grow

扩张因子：当容器有剩余空间时，决定如何“瓜分”这些空间。

flex-shrink

收缩因子：当容器空间不足时，决定如何“分摊”超出的部分，

flex

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto。

常见写法：

flex: 1; /* 等同于 flex: 1 1 0; */
flex: none; /* 等同于 flex: 0 0 auto; */
flex: auto; /* 等同于 flex: 1 1 auto; */

经典布局；响应式三栏布局

核心要点：

• flex-grow：定义了元素在容器有 剩余空间 时的 “放大” 能力。
• flex-shrink：定义了元素在容器 空间不足 时的 “缩小” 能力。
• min-width / max-width：为元素设定 绝对边界，它们的优先级很高，可以覆盖 flex 属性的计算结果。

.container {
  display: flex;
  justify-content: center; /* 优化超宽屏居中 */
  min-height: 200px;
}

.left,
.right {
  width: 200px;
  flex-shrink: 0; /* 防止窄屏压缩 */
}

.middle {
  flex-grow: 1; /* 占满剩余空间 */
  max-width: 1000px; /* 限制最大宽度 */
}

多行模式

flex-wrap

flex-wrap: wrap：

• nowrap：（默认值）所有项目都在一行内排列。
• wrap：开启多行模式。当项目超出容器时，自动换行。
• wrap-reverse：和 wrap 类似，但是新行会出现在交叉轴的反方向（已有行的“上方”）。

align-content

align-content 精准控制多行布局。

常见值：

• stretch（默认值）：行拉伸以填满容器。
• flex-start：行向交叉轴起点对齐。
• flex-end：行向交叉轴终点对齐。
• center：行在交叉轴上居中。
• space-between：行两端对齐，中间平分。
• space-around：行两侧间距相等。
• space-evenly：所有间距完全相等。

使用前提

1. flex-wrap 的值为 wrap 或 wrap-reverse。
2. 容器实际上发生了换行（即至少有两行）。

align-items vs align-content

• align-items：控制 单行 flexbox 上所有项目在交叉轴的对齐方式。
• align-content：控制 多行 flexbox 上所有项目在交叉轴的对齐方式。

子项控制

align-self

常见值：

• auto：（默认值）继承容器的 align-items。
• flex-start：项目向交叉轴的起点对齐。
• flex-end：项目向交叉轴的终点对齐。
• center：项目在交叉轴上居中。
• baseline：项目在交叉轴上以文本基线对齐。
• stretch：项目拉伸以填满容器（前提是项目没有固定高度）。

order

在不改变 HTML 结构的情况下，可以通过 order 属性来调整 flex 子项的视觉排列顺序。

• 所有子项的 order 默认值为 0。
• 浏览器根据 order 的数值从小到大进行排列。
• order 可以为负值。

可访问性（a11y）的陷阱

使用 order 可能会影响键盘导航和屏幕阅读器的内容顺序，需谨慎使用。

flex 开发问题记录

flex-end 为什么 overflow 无法滚动

在 flex 布局中，如果整体列表项元素的对齐方式是 flex-end，则当里面的内容超过容器的时候，即使容器设置了 overflow: auto 也是无法有滚动效果的。

问题原因：flex-end 之所以不会出现滚动条，就是因为里面内容溢出容器的方向不是在容器的下方或者右侧，而是在容器的顶部和左侧，自然就无法触发滚动条的出现。

解决方案：解决方法很简单，对齐方式开始默认的 flex 对齐，然后使用 margin: auto 实现 end 对齐 就可以了。

flex: 1 与 min-height: auto

在 CSS Flexbox 中，flex 项目有一个 默认的最小尺寸约束：

/* Flexbox 项目的默认值 */
.flex-item {
  min-height: auto; /* 这是关键！ */
}

这个 min-height: auto 意味着：

• 元素的最小高度不能小于其 内容的固有高度
• 对于 <video> 元素，它有自己的固有尺寸（通常是视频的原始尺寸）

<div className="flex h-full flex-col">
  {/* 父容器高度有限 */}
  <div className="flex-none">...</div>
  {/* 固定高度的头部 */}
  <video className="flex-1">...</video>
  {/* 应该占据剩余空间 */}
</div>

没有 min-height: 0 时的行为：

• 父容器高度 = 100%（可用空间）
• 头部占用固定空间
• video 元素说："我需要至少保持我的固有高度（比如 480px）"
• 如果剩余空间 < 480px，video 仍然保持 480px
• 结果：video 超出了父容器（会看到溢出父容器）

当为 <video> 加上了 min-height: 0 之后，相当于告诉了 video 元素：

• "你可以缩小到任意小的高度，包括 0"
• 不再受固有尺寸的约束
• 完全服从 flexbox 的空间分配

有 min-height: 0 时的行为：

• 父容器高度 = 100%
• 头部占用固定空间
• video 元素说："我可以适应任何剩余空间，哪怕很小"
• 结果：video 完美适应剩余空间