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。

示例

/* 指定 */
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|

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

说明：

• 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。

默认值	auto
适用于	flex项，包括 in-flow 伪元素
继承性	无
动画性	visual
计算值	指定值

例子

//HTML 

• 1: flex-basis test
• 2: flex-basis test
• 3: flex-basis test
• 4: flex-basis test
• 5: flex-basis test

• 6: flex-basis test

//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
 
1
 
2
 
3
#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;
}

效果图：

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com