前端Wiki/词条/flex

flex

定义CSS 弹性布局核心属性，控制弹性子项在容器主轴上的伸缩比例

flex 是 flex-grow、flex-shrink、flex-basis 三个属性的简写，用来决定一个弹性子项如何分配容器的剩余空间。默认值为 0 1 auto，即不放大、可缩小、基准尺寸为内容本身。

理解 flex 的关键是抓住「基准尺寸 → 伸缩分配」两步：先用 flex-basis 确定子项的初始大小，再由 grow 按比例分走剩余空间，空间不足时由 shrink 按比例收缩。三者只写一个值时，按 CSS 规范有明确的解析规则。

CSS

.row { display: flex; gap: 12px; }
.box { flex: 1; }        /* 三个盒子等分 */
.box-fixed { flex: none; width: 120px; } /* 固定不伸缩 */

⚠ 常见误区