2 min read

CSS3 flex-basis

WebPlatform上对flex-basis的解释是:

The flex-basis CSS property describes the initial main size of the flex item before any free space is distributed according to the flex factors described in the flex property (flex-grow and flex-shrink).

在flex container分配剩余空间前,flex-basis决定flex item在主方向上的大小。

它的取值有两种

Percentages refer to the flex container’s inner main size

Computed value as specified, with lengths made absolute

  1. 百分比 – 根据flex container的主方向大小计算
  2. 计算值 – 绝对数

计算值

flex-growflex-shrink取默认值时,计算值的flex-basis类似max-width

在flex-container主方向大小不足以容纳flex items的flex-basis总和时,浏览器会自动缩小它们。

举一段代码说明:

<div class='Grid'>
  <div class='first'>我曾在天上见过地的繁华</div>
  <div class='last'>陈三说的</div>
</div>
<style>
.example-Grid{
  color: white;
  display: flex;
  width: 400px;
  border: 1px solid red;
}
.example-first{
  background: green;
  flex-basis: 400px;
}
.example-last{
  background: orange;
  flex-basis:200px;
}
</style>

样式结果如下:

我曾在天上见过地的繁华
<div class='example-last'>
  陈三说的
</div>

这里,.example-first的宽度是267px,.example-last的宽度是133px,它们是这样计算的:

.example-first(宽度) = 400 * (400 / (400 + 200)) = 266.666666667

<p>
  .example-last(宽度) = 400 * (200 / (400 + 200)) = 133.333333333
</p>

也就是说,flex container按比例分配flex items的大小。

百分比

百分比的情况与计算值是一样的,如果flex container足够包含flex items的flex-basis总值,则10%的意思就是flex container在主方向的大小乘以10%。

如果flex container不足以包含flex items的flex-basis总值,比如:

<div class=“example2-Grid”>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>
<style>
.example2-Grid{
     border: 3px solid black;
     display: flex;
     height: 200px;
}
.example2-Grid div:nth-of-type(1){
     background: rgb(0, 137, 250);
     flex-basis: 100%;
}
.example2-Grid div:nth-of-type(2){
     background: rgb(105, 0, 88);
     flex-basis: 20%;
}
.example2-Grid div:nth-of-type(3){
     background: rgb(255, 59, 0);
     flex-basis: 30%;
}
.example2-Grid div:nth-of-type(4){
     background: rgb(0, 197, 73);
     flex-basis: 40%;
}
</style>

代码的样式如下:

<div>
  三
</div>

<div>
  是
</div>

<div>
  人
</div>

其中第一个flex item的flex-basis取值为100%,则计算时,它的main size占比是:

100% / (100% + 20% + 30% + 40%) = 52.631578947%

真正设计或实现页面时,我们通常不可能做这样的计算,但了解计算过程的话,心里有底,碰上问题,就知道怎么解决。

flex-basis · css · WPD · WebPlatform.org

<fn name="13071.2">
  <p>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis">flex-basis &#8211; CSS | MDN</a>
  </p>
</fn>

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo