一、flex-basis 的含义

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

Note: 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

二、flex-basis 的使用

2.1. 取值

值/类型 描述
auto 默认值，意为“参照我的 width 和 height 属性”
number 宽度值，可以是长度单位（如10px、10em等）或百分数（基于其父弹性盒容器主轴尺寸，若父容器尺寸依赖于子元素，则效果同 auto）
content 基于 flex 的元素的内容自动调整大小
尺寸关键词 fill, max-content, min-content, fit-content 等；
全局数值 inherit, initial, unset 等。

2.2. 举例说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
  .parent {
    display: flex;
    width: 600px;
  }
  .parent > div {
    height: 100px;
  }
  .item-1 {
    width: 140px;
    flex: 2 1 0%;
    background: blue;
  }
  .item-2 {
    width: 100px;
    flex: 2 1 auto;
    background: darkblue;
  }
  .item-3 {
    flex: 1 1 200px;
    background: lightblue;
  }
</style>

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

  1. 父容器主轴宽度为 600px；

  2. 三个子元素基础宽度分别为 0%（即 0）、auto（同 width，100px ）、 200px，合计 300px；

  3. 父容器剩余空间为 600px - 300px = 300px;

  4. 根据 flex-grow 权重 2:2:1，各 item 元素分得的空间宽度分别为

    item-1：(2/(2+2+1)) * 300px = 120px

    item-2：(2/(2+2+1)) * 300px = 120px

    item-3：(1/(2+2+1)) * 300px = 60px

  5. 故各 item 元素在父 flex 容器内的实际宽度分别为

    item-1：0% + 120px = 0 + 120px = 120px

    item-2：auto + 120px = 100px + 120px = 220px

    item-3：200px + 120px = 320px

flex-basis 可以视为 flex 元素在放进父级 flex 容器之前的大小，是 flex 元素在主轴上伸缩变化的基础值，元素的 grow 和 shrink 都基于这个基础值来确定。

三、flex-basis 与 width 的区别

Flex Items 的应用准则，即

content –> width –> flex-basis (limted by max|min-width)。

也就是说，

若没有设置 flex-basis，则 flex-basis 的值就是 flex 元素的 width；

若没有设置 width，则 flex-basis 的值就是 flex 元素内容 content 的尺寸；

若同时设置了 flex-basis 和 width，width 属性将被忽略，元素的伸缩基于 flex-basis 的值。

Note：flex-basis 受 min-width/max-width/min-height/max-height 限制。

四、参考

4.1. flex-basis - CSS（层叠样式表） | MDN

4.2. Flex Basis与Width的区别