Flex 项目属性

学习

Flex 项目属性

2026-02-23/0/ 编辑

Flex 项目属性

一、Flex 项目属性概览

以下 6 大属性为 Flex 项目属性，都是直接添加到项目身上：

属性名说明默认值
order定义项目的排列顺序。数值越小，排列越靠前0
align-self单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性auto
flex-growflex 项主尺寸的 flex 增长系数。默认为 0，即如果存在剩余空间，也不放大0
flex-shrinkflex 项主尺寸的缩小比例，默认为 1，即如果空间不足，该项目将缩小1
flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）auto
flexflex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写0 1 auto

二、order 项目的排列顺序

2.1 基本说明

  • order 属性定义项目的排列顺序
  • order 属性值为 >= 0 的整数，数值越小，排列越靠前
  • 默认值为 0

2.2 语法

order: 1;

2.3 案例演示

<style>
  .flex-container {
    height: 100px;
    background-color: skyblue;
    display: flex;
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    padding: 5px 10px;
    margin: 5px;
  }
  .flex-item:nth-child(1) {
    order: 1;  /* 数值越小，越排前 */
  }
  .flex-item:nth-child(2) {
    order: 3;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

三、align-self 单个项目交叉轴对齐方式

3.1 基本说明

  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
  • align-self 的默认值为 auto，表示继承父元素的 align-items 属性
  • 如果父元素没有设置 align-items 属性，则等同于 stretch（要生效，元素自身没有设置高度）

3.2 属性值

属性值说明
auto默认值，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
stretch如果项目未设置高度或设为 auto，将占满整个容器的高度
flex-start交叉轴的起点对齐
flex-end交叉轴的终点对齐
center交叉轴的中点对齐
baseline项目的第一行文字的基线对齐

3.3 语法

/* 与交叉轴起点对齐 */
align-self: flex-start;

3.4 案例演示

<style>
  .flex-container {
    height: 200px;
    background-color: skyblue;
    display: flex;
    align-items: center;
  }
  .flex-item {
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    padding: 5px 10px;
    margin: 5px;
  }
  .flex-item:nth-child(1) {
    align-self: auto;
  }
  .flex-item:nth-child(2) {
    align-self: stretch;
  }
  .flex-item:nth-child(3) {
    align-self: flex-start;
  }
  .flex-item:nth-child(4) {
    align-self: flex-end;
  }
  .flex-item:nth-child(5) {
    align-self: center;
  }
  .flex-item:nth-child(6) {
    align-self: baseline;
  }
</style>

<div class="flex-container">
  <div class="flex-item">auto</div>
  <div class="flex-item">stretch</div>
  <div class="flex-item">flex-start</div>
  <div class="flex-item">flex-end</div>
  <div class="flex-item">center</div>
  <div class="flex-item">baseline</div>
</div>

3.5 换行时的注意事项

当项目换行时，其 align-self 单个项目对齐方式，是相对于其所在的那一行的轴线而言。

<style>
  .flex-container {
    height: 400px;
    width: 600px;
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .flex-item {
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    padding: 5px 10px;
    margin: 5px;
  }
  .flex-item:nth-child(1) {
    height: 100px;
    align-self: auto;
  }
  .flex-item:nth-child(2) {
    align-self: stretch;
  }
  .flex-item:nth-child(3) {
    align-self: flex-start;
  }
  .flex-item:nth-child(4) {
    align-self: flex-end;
  }
  .flex-item:nth-child(5) {
    align-self: center;
  }
  .flex-item:nth-child(6) {
    align-self: baseline;
  }
</style>

<div class="flex-container">
  <div class="flex-item">auto</div>
  <div class="flex-item">stretch</div>
  <div class="flex-item">flex-start</div>
  <div class="flex-item">flex-end</div>
  <div class="flex-item">center</div>
  <div class="flex-item">baseline</div>
</div>

四、flex-grow 项目主轴放大系数

4.1 基本说明

  • flex-grow 设置 flex 项目主尺寸（main size）的 flex 增长系数
  • 主尺寸是项目的宽度还是高度，这取决于 flex-direction 值
  • flex-grow 属性，在 Flex 容器有剩余空间时生效（默认主轴为水平轴）

4.2 计算公式

剩余空间计算：

剩余空间 = flex 容器宽大小 - 所有 flex 项目占位宽加起来的大小

注意： 剩余空间的值一定要是大于 0 的，否则就是没有剩余空间。

放大计算公式：

  1. 当所有项目的 flex-grow 值的总和加起来 < 1 时：

    项目放大后宽（width 属性） = 项目原始宽 + 剩余空间 * 项目的 flex-grow 值

  2. 当所有项目的 flex-grow 值的总和加起来 >= 1 时：

    项目放大后宽 = 项目原始宽 + 剩余空间 * (flex-grow 值) / 所有项目的 flex-grow 值总和

4.3 flex-grow 默认值

flex-grow 的默认值为 0，表示即使有剩余空间，也不增长（放大）。

4.4 案例 1：所有 flex-grow 值总和 < 1

<style>
  .flex-container {
    width: 400px;
    height: 100px;
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
  }
  .flex-item:nth-child(1) {
    flex-grow: 0.1;
    background-color: tomato;
  }
  .flex-item:nth-child(2) {
    flex-grow: 0.2;
    background-color: khaki;
  }
  .flex-item:nth-child(3) {
    flex-grow: 0.3;
    background-color: pink;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<!-- 计算过程：
  剩余宽 = 400 - (50+50+50) = 250
  项目1放大后宽 = 50 + 250 * 0.1 = 75
  项目2放大后宽 = 50 + 250 * 0.2 = 100
  项目3放大后宽 = 50 + 250 * 0.3 = 125
-->

4.5 案例 2：所有 flex-grow 值总和 >= 1

<style>
  .flex-container {
    width: 400px;
    height: 100px;
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
  }
  .flex-item:nth-child(1) {
    flex-grow: 1;
    background-color: tomato;
  }
  .flex-item:nth-child(2) {
    flex-grow: 2;
    background-color: khaki;
  }
  .flex-item:nth-child(3) {
    flex-grow: 3;
    background-color: pink;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<!-- 计算过程：
  剩余宽 = 400 - (50+50+50) = 250
  flex-grow 总和 = 1 + 2 + 3 = 6
  项目1放大后宽 = 50 + 250 * 1/6 = 91.7
  项目2放大后宽 = 50 + 250 * 2/6 = 133.3
  项目3放大后宽 = 50 + 250 * 3/6 = 175
-->

4.6 温馨提示

flex 容器的剩余空间为 0 时，不管 flex 项目的 flex-grow 的值是多少，flex 项都不会放大。

五、flex-shrink 项目主轴上缩小系数

5.1 基本说明

  • flex-shrink 属性指定了 flex 元素的收缩规则
  • 当所有 flex 项目占位宽度之和大于容器时候才会发生收缩（默认主轴为水平方向）
  • flex 项目收缩的大小是依据所有 flex 项的 flex-shrink 的值决定的
  • 只有当 flex 容器设置了 flex-wrap: nowrap 时，才能看到效果

5.2 flex-shrink 默认值

flex-shrink 的默认值为 1，表示容器空间不足时，所有 flex 项目等比缩小。

5.3 计算公式

总缩放宽 = 所有子项宽 - 父容器宽
每种子项宽占比 = 每个子项宽 / 所有子项总宽
缩小宽 = 每个子项宽占比 * 总缩放宽

注意： 元素无论如何都不会缩小到比自身内容宽还小。

5.4 案例：默认等比缩小

<style>
  .flex {
    width: 500px;
    height: 200px;
    background-color: skyblue;
    display: flex;
    border: 2px solid blue;
  }
  .item:nth-child(1) {
    width: 200px;
    background-color: tomato;
  }
  .item:nth-child(2) {
    width: 200px;
    background-color: khaki;
  }
  .item:nth-child(3) {
    width: 300px;
    background-color: pink;
  }
</style>

<div class="flex">
  <div class="item item1">
    1
    <!-- 可以试着往这里面插入一张 宽200px的图片，则会发现，元素宽度不会缩小 -->
  </div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

<!-- 计算过程：
  总缩放宽 = (200+200+300) - 500 = 200
  item1 宽占比 = 200/(200+200+300) = 2/7
  item1 最终宽 = 200 - 200*2/7 = 142.85
  
  item2 宽占比 = 200/(200+200+300) = 2/7
  item2 最终宽 = 200 - 200*2/7 = 142.85
  
  item3 宽占比 = 300/(200+200+300) = 3/7
  item3 最终宽 = 300 - 200*3/7 = 214.3
-->

5.5 flex-shrink 值为 0

flex-shrink: 0 表示元素无论如何不缩放。

<style>
  .flex {
    width: 500px;
    height: 200px;
    background-color: skyblue;
    display: flex;
    border: 2px solid blue;
  }
  .item:nth-child(1) {
    width: 200px;
    background-color: tomato;
    flex-shrink: 0;  /* 不缩放 */
  }
  .item:nth-child(2) {
    width: 200px;
    background-color: khaki;
  }
  .item:nth-child(3) {
    width: 300px;
    background-color: pink;
  }
</style>

5.6 所有元素 flex-shrink 值的和大于 1

所有元素的 flex-shrink 值大于 1，正常情况下则会将所有溢出容全部收缩至父容器内。

flex-shrink 的值越大，表示收缩量尽可能越大。

注意： 元素无论如何都不会缩小到比自身内容宽还小。

<style>
  .flex {
    width: 500px;
    height: 200px;
    background-color: skyblue;
    display: flex;
    border: 2px solid blue;
  }
  .item:nth-child(1) {
    width: 200px;
    background-color: tomato;
    flex-shrink: 0.5;
  }
  .item:nth-child(2) {
    width: 200px;
    background-color: khaki;
    /* 默认 flex-shrink: 1 */
  }
  .item:nth-child(3) {
    width: 300px;
    background-color: pink;
    /* 默认 flex-shrink: 1 */
  }
</style>

5.7 所有元素 flex-shrink 值的和小于 1

最终所有元素的总收缩宽 = 总溢出宽 * 所有元素的 flex-shrink 值之和

注意： 元素默认 flex-shrink 的值为 1。要想使所有元素的 flex-shrink 值之和小于 1，则每个元素都需要单独设置 flex-shrink 的值。

<style>
  .flex {
    width: 500px;
    height: 200px;
    background-color: skyblue;
    display: flex;
    border: 2px solid blue;
  }
  .item:nth-child(1) {
    width: 200px;
    background-color: tomato;
    flex-shrink: 0.5;
  }
  .item:nth-child(2) {
    width: 200px;
    background-color: khaki;
    flex-shrink: 0.2;
  }
  .item:nth-child(3) {
    width: 300px;
    background-color: pink;
    flex-shrink: 0.2;
  }
</style>

<!-- 计算过程：
  总溢出宽 = (200+200+300) - 500 = 200
  flex-shrink 总和 = 0.5 + 0.2 + 0.2 = 0.9
  总收缩宽 = 200 * 0.9 = 180
  
  item1 收缩宽 = 200 * 0.5/0.9 = 111.1
  item2 收缩宽 = 200 * 0.2/0.9 = 44.4
  item3 收缩宽 = 200 * 0.2/0.9 = 44.4
-->

5.8 实际开发常用场景

在实际开发中，用的最多的是以下两种情况：

  1. flex-shrink: 0 - 元素无论如何不缩放
  2. 所有元素的 flex-shrink 值，默认都为 1，等比缩小

六、flex-basis 分配剩余空间前，项目占据主轴空间大小（main size）

6.1 基本说明

  • flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
  • 也就是 flex 项目的起始宽或高
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 它的默认值为 auto，即项目的本来大小（如果 width: 200px，则缩放以 200px 为参考）
  • flex-basis 的优先级要高于 width（如果同时设置 width 和 flex-basis，则元素宽以 flex-basis 值为主）

6.2 语法示例

.flex-item:nth-child(1) {
  width: 100px;
  /* 在计算剩余空间之前，元素宽为 200px */
  flex-basis: 200px;
}

6.3 案例演示

<style>
  .flex-container {
    width: 600px;
    height: 100px;
    background-color: skyblue;
    display: flex;
    align-items: center;
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
  }
  .flex-item:nth-child(1) {
    background-color: tomato;
    width: 100px;
    flex-basis: 200px;  /* 剩余空间前，元素的大小 */
    flex-grow: 1;
  }
  .flex-item:nth-child(2) {
    background-color: khaki;
    width: 200px;
    flex-grow: 2;
  }
  .flex-item:nth-child(3) {
    background-color: pink;
    width: 100px;
    flex-grow: 3;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<!-- 计算过程：
  剩余宽 = 600 - (200+200+100) = 100
  flex-grow 总和 = 1 + 2 + 3 = 6
  项目1放大后宽 = 200 + 1/6*100 = 216.7
  项目2放大后宽 = 200 + 2/6*100 = 233.3
  项目3放大后宽 = 100 + 3/6*100 = 150
-->

6.4 注意区分下面两种情况

/* 在计算剩余空间之前，元素宽为 200px */
.flex-auto {
  width: 200px;
  flex-basis: auto;  /* 这里 auto 相当于 200px */
}

/* 在计算剩余空间之前，元素的宽为 0 */
.flex-auto {
  width: 200px;
  flex-basis: 0%;  /* 这里相当于元素宽为 0 */
}

七、flex 属性

7.1 基本说明

  • flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写
  • flex 属性的默认值：0 1 auto
flex: 1 1 auto;
/* 以上 css 等价于以下三个属性的简写 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

7.2 flex 一个值写法

  1. 一个 flex-grow 的有效值：
    此时简写会扩展为 flex: <flex-grow> 1 0

    flex: 1;
/* 上面简写，等价于下面写法 */
flex: 1 1 0;

  2. 一个 flex-basis 的有效值：
    此时简写会扩展为 flex: 1 1 <flex-basis>

    flex: 0px;  /* 这里为 0 必须带单位，否则会被当成 flex-grow 处理 */
/* 上面写法等价于下面写法 */
flex: 1 1 0px;

  3. 关键字：

    flex: initial;  /* 等价于 flex: 0 1 auto，为 flex 的默认值 */
flex: none;     /* 等价于 flex: 0 0 auto */
flex: auto;     /* 等价于 flex: 1 1 auto，默认值 */

7.3 flex 两个值写法

第一个值必须是一个 flex-grow 的有效值。

第二个值必须是以下之一：

  1. 一个 flex-shrink 的有效值：
    此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0

    flex: 1 1;  /* 等价于 flex: 1 1 0 */

  2. 一个 flex-basis 的有效值：
    此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>

    flex: 1 auto;  /* 等价于 flex: 1 1 auto */

7.4 推荐记住以下常见的简写

简写完整形式说明
flex: noneflex: 0 0 auto不支持弹性伸缩
flex: autoflex: 1 1 auto在元素设置宽的基础上自动伸缩
flex: 1flex: 1 1 0%在元素宽为 0 的基础上伸缩
<style>
  .flex-container {
    height: 100px;
    background-color: skyblue;
    display: flex;
    justify-content: space-between;  /* 两端对齐 */
    align-items: center;  /* 垂直居中对齐 */
  }
  .flex-item {
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
  }
  .flex-item:nth-child(1) {
    background-color: tomato;
    width: 200px;
  }
  .flex-item:nth-child(2) {
    background-color: khaki;
    overflow: hidden;
    white-space: nowrap;  /* 文字不换行 */
    flex: 1;  /* 相当于 flex: 1 1 0% */
  }
  .flex-item:nth-child(3) {
    width: 300px;
    background-color: pink;
  }
</style>

<div class="flex-container">
  <div class="flex-item">logo</div>
  <div class="flex-item">搜索</div>
  <div class="flex-item">登录</div>
</div>

八、z-index 属性

8.1 基本说明

z-index 属性用于控制 Flex 子项的层叠顺序（也就是元素在 z 轴上的顺序），值越大元素越在上面显示。

flex 子项的 z-index 属性默认值为 auto。

8.2 案例演示

<style>
  .flex {
    display: flex;
  }
  .item {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    background-color: khaki;
    border-radius: 50%;
    margin-right: -30px;  /* 后面的元素往左边移 */
  }
  /* 鼠标移入，元素显示在最上面 */
  .item:hover {
    z-index: 3;  /* 提升元素的层级 */
  }
</style>

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
猜你喜欢