前端Wiki/CSS/进阶/Flexbox 弹性布局

flex 子项属性

写在子项上的三个属性控制「怎么伸缩」：

flex-grow：有剩余空间时按比例放大，默认 0 不放大。设 1 表示平均分，设 2 表示占两份。
flex-shrink：空间不足时按比例缩小，默认 1。设 0 则绝不压缩（可能溢出）。
flex-basis：分配空间前的基础尺寸，auto 表示看自身 width。

速记 flex: 1 等价于 1 1 0%——可以放大、可以缩小、基础尺寸归零、完全按比例瓜分空间，是「让这一项占满剩余空间」的标准答案。典型场景：左侧固定宽度，右侧 flex:1 吃掉剩余。

其他常用子项属性：align-self 单独覆盖交叉轴对齐；order 改变排列顺序（默认都是 0，越小越靠前），不改 HTML 就能调整视觉顺序。

本节要点grow 管放大、shrink 管缩小、basis 管基准；flex:1 占满剩余空间；order 可改视觉顺序；align-self 单独调整某个子项。

CSS

<style>
  .layout {
    display: flex; height: 80px;
  }
  .side {
    width: 100px;            /* 固定侧栏 */
    background: #c8e6c9;
  }
  .main {
    flex: 1;                 /* 吃掉剩余空间 */
    background: #bbdefb;
  }
  .item { flex: 1; }         /* 三等分 */
  .item:nth-child(2) { flex: 2; } /* 中间占两份 */
</style>
<div class="layout">
  <div class="side">固定</div>
  <div class="main">flex:1 自动占满</div>
</div>
<div class="layout">
  <div class="item">1份</div>
  <div class="item">2份</div>
  <div class="item">1份</div>
</div>

🔗 相关词条HTML flex 交叉轴弹性布局

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读