flex-basis
版本:CSS3
CSS属性flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用box-sizing
改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。
Note:当一个元素同时被设置了flex-basis
(除值为auto
外)和width
(或者在flex-direction: column
情况下设置了height
),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>
这个flex-basis
属性被指定为关键词content或者<width>。
取值
Note:由于最初规范中没有包括这个值,在一些早期的浏览器实现的flex布局中,content值无效,可以利用设置(
width
或height
)为auto达到同样的效果。Note:简史
说明:
说明:
设置或检索弹性盒伸缩基准值。
- 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
- 对应的脚本特性为flexBasis。
默认值 | auto |
适用于 | flex项,包括in-flow伪元素 |
继承性 | 无 |
动画性 | visual |
计算值 | 指定值 |
例子
//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; }
效果图: