指定了 flex 元素在主轴方向上的初始大小 | flex-basis

flex-basis

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

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

/* Intrinsic sizing keywords */
flex-basis: fill;
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: unset;

初始值	auto
`适用元素`	弹性项目，包括流入的伪元素
`是否是继承属性`	没有
`百分比`	请参阅柔性容器的内部主尺寸
`适用媒体`	视觉
`计算值`	如指定的那样，但相对长度转换为绝对长度
`动画类型`	一个长度，百分比或者calc（）;
`正规顺序`	关键字之前的长度或百分比（如果两者都存在）

语法

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

取值

<'width'>width 值可以是一个数字后面跟着绝对单位例如px,mm,pt; 该值也可以是一个百分数，那么这个百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）。负值是不被允许的。

Note:由于最初规范中没有包括这个值，在一些早期的浏览器实现的flex布局中，content值无效，可以利用设置(width 或 height) 为 auto达到同样的效果.

注：简史

最初，“flex-basis：auto”意思是“看我的宽度或高度属性”。

然后，flex-basis：auto被改变为自动调整大小，而“main-size”被引入为“查看我的宽度或高度属性”关键字。它在bug 1032922中实现。

然后，这个改变在bug 1093316中被恢复了，所以“auto”再一次意味着“查看我的宽度或者高度属性”。并引入新的“内容”关键字来触发自动调整大小。（错误1105111涵盖添加该关键字）。

形式语法

content | <'width'>

例

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

.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: 20px;
  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: 18px;
}

.flex1 {
  flex-basis: auto;
}

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

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

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

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

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

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

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

.flex5 {
   flex-basis: content;
}

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

.flex6 {
  flex-basis: -webkit-fill-available;
  flex-basis: -moz-available;
  flex-basis: fill;
}

.flex6:after {
  content: 'fill/-webkit-fill-available/-moz-available';
}

结果

规范

Specification	Status	Comment
CSS Flexible Box Layout ModuleThe definition of 'flex-basis' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Edge	Internet Explorer	Opera	Safari
Basic support	18.0 (18.0)1 22.0 (22.0)2	21.0-webkit	(Yes)-webkit (Yes)	113	12.10	7.0-webkit4
auto	18.0 (18.0)	21.0	(Yes)	11	12.10	7.0-webkit
content	No support5	No support	(Yes)	No support	No support	No support
fill	(Yes)-moz6	?	?	?	?	?
max-content	(Yes)-moz6	?	?	?	?	?
min-content	(Yes)-moz6	?	?	?	?	?
fit-content	(Yes)-moz6	?	?	?	?	?

Feature	Firefox Mobile (Gecko)	Android	Edge	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	(Yes)-webkit (Yes)	No support	12.10	No support