flex-basis

基线 广泛可用

此功能已经成熟稳定，并在多种设备和浏览器版本中都能正常运行。自 2015 年 9 月.

flex-basis CSS 属性设置 弹性项目 的初始主尺寸。除非使用 box-sizing 设置，否则它设置的是内容框的大小。

注意：建议使用 flex 简写，而不是单独声明 flex-grow、flex-shrink 和 flex-basis。之所以将它们分开说明，是因为本文档是关于简写组件之一：flex-basis 属性。

试一试

在此示例中，所有三个项目的 flex-grow 和 flex-shrink 属性均设置为 1，表示弹性项目可以从初始 flex-basis 开始增大和缩小。

该演示更改了第一个弹性项目上设置的 flex-basis 值，导致它增大或缩小以填充可用空间。其他弹性项目也将改变大小；它们至少为 min-content 大小。例如，当第一个项目的 flex-basis 设置为 200px 时，它将从 200px 开始，然后缩小以适应可用空间。

如果 flex-basis 设置为除 auto 之外的值，并且同一弹性项目设置了 width（或在 flex-direction: column 的情况下设置了 height），则 flex-basis 值优先。

语法

css
/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item's content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;

flex-basis 属性指定为关键字 content 或 <'width'>。

值

<'width'>

以下任何单位

  • <length> 设置绝对值。
  • <percentage> 设置包含块内容区域宽度或高度的百分比。flex-basis 的百分比值相对于弹性容器解析。如果弹性容器的大小不确定，则 flex-basis 的使用值是 content。
  • auto 使用水平书写模式下 width 的值，以及垂直书写模式下 height 的值；当对应值也是 auto 时，则使用 content 值。
  • max-content 设置固有首选宽度。
  • min-content 设置固有最小宽度。
  • fit-content 设置包含块内容区域的最大可能大小，受 min-content 和 max-content 值限制，并根据当前元素的内容计算得出。
content

指示自动大小，基于弹性项目的内容。

正式定义

初始值auto
适用于弹性项目，包括内联伪元素
继承否
百分比参考弹性容器的内部主尺寸
计算值按指定的方式，但将相对长度转换为绝对长度
动画类型长度、百分比 或 calc()；

正式语法

flex-basis = 
  content    |
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

设置弹性项目的初始尺寸

HTML

html
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

CSS

css
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.flex::after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 12px;
}

.flex1 {
  flex-basis: auto;
}

.flex1::after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2::after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3::after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4::after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5::after {
  content: "content";
}

结果

弹性基线 0 与 0% 的比较

此示例演示了当flex-direction设置为column且弹性容器和弹性项目没有设置高度时，flex-basis为0与flex-basis为0%之间的区别；虽然0是一个绝对长度，但百分比的flex-basis值会解析为content值。

HTML

我们包含了两个结构相同的弹性容器。它们将以类似的方式进行样式设置，但flex-basis值不同。每个容器都有两个子元素：一个标题<div>和一个<section>。<section>元素有一个内容<div>子元素，它不会被设置为弹性项目，但会赋予它一个高度。

html
<div class="container basis-0">
  <div>heading</div>
  <section>
    flex-basis: 0;
    <div class="content"></div>
  </section>
</div>
<div class="container basis-0-percent">
  <div>heading</div>
  <section>
    flex-basis: 0%;
    <div class="content"></div>
  </section>
</div>

CSS

我们为容器设置了内联弹性容器样式，这些容器将并排显示，以便更好地比较它们。我们将其flex-direction设置为column。第一个容器的弹性项目具有flex-basis值为0，而第二个容器的弹性项目具有flex-basis值为0%。弹性容器及其弹性项目都没有显式设置高度，但section元素的高度不能超过200px，其子元素的高度为300px。

css
.container {
  width: 40vw;
  padding: 1rem;
  border: 1px dashed blue;

  display: inline-flex;
  flex-direction: column;
}

section {
  border: 1px solid red;

  overflow: auto;
  min-height: 200px;
}

.content {
  background: wheat;
  height: 300px;
}

.container.basis-0 > * {
  flex-basis: 0;
}
.container.basis-0-percent > * {
  flex-basis: 0%;
}

结果

在第一个容器中，使用flex-basis: 0，<section>元素的初始主尺寸为零，并增长到200px的高度限制。在第二个容器中，使用flex-basis: 0%，<section>元素的初始主尺寸为300px，因为弹性容器没有设置高度，所以百分比的flex-basis值会解析为content值。

规范

规范
CSS 弹性盒布局模块级别 1
# flex-basis 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅