flex-basis

版本： CSS3

CSS属性 flex-basis 指定了 flex 元素在主轴方向上的 初始大小 。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒的尺寸。 flex-basis 属性定义了项目占据的主轴空间。浏览器根据这个属性，计算主轴多余空间或不足空间的大小。它的默认值为 auto ，即项目的本来大小。

在flex布局中，一个flex子项的在主轴方向上的最后的 实际尺寸 是由三部分共同作用的结果：

• 元素自身尺寸： width （或者 hight ）。
• flex 伸缩尺寸： flex-grow （扩展）或 flex-shrink （收缩）。
• flex 基础尺寸： flex-basis 。

示例

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

/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 在flex item内容上的自动尺寸 */
flex-basis: content;

/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

浏览器支持

IE11以上版本的浏览器都支持 flex-basis

语法

flex-basis : auto | content | <width>

• auto ：默认值。意思是参考主轴方向的尺寸 width （或 hight ）。
• content ：基于 flex 的元素的内容自动调整大小。
• <width> ：其值可以是 <length> 。也可以是一个相对于其父弹性盒容器主轴尺寸的 百分数 。负值是不被允许的。

说明：

• flex-basis 表示在 flex子元素的初始值（或者说是假设大小，基准值），用来计算剩余空间大小（或者不足空间大小）。如果 所有子元素的基准值之和 大于 剩余空间 ，则会根据每项设置的基准值，按比率（ flex-grow 或 flex-shrink ）伸缩剩余空间。
• 当一个元素同时设置 flex-basis 和主轴方向的大小的时候， flex-basis 具有优先等级。
  • 当 flex-direction:row 时，同时被设置了 width 和 flex-basis （除 flex-basis：auto 外）， flex-basis 具有更高的优先级。
  • 当 flex-direction:column 时，同时被设置了 height 和 flex-basis （除 flex-basis：auto 外）， flex-basis 具有更高的优先级。
• 对应的脚本特性为 flexBasis 。

例子

//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: 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';
}

.flex6 {
  flex-basis: fill;
}

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

//HTML
<div id="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>


#main{
 width:450px;
 height:300px;
 border:1px solid #ccc;
 display:-webkit-flex;/*safari*/
 display:flex;
}

#main div{
 -webkit-flex-grow:0;/*safari6.1+*/
 -webkit-flex-shrink:0;/*safari6.1+*/
 -webkit-flex-basis:80px;/*safari6.1+*/
 flex-grow:0;
 flex-shrink:0;
 flex-basis:80px;
}

效果图：