CSS参考手册
灵活的框布局 | Flexible Box Layout
指定了 flex 元素在主轴方向上的初始大小 | 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
; 该值也可以是一个百分数,那么这个百分数就是相对于其父弹性盒容器的宽或者高(取决于主轴方向)。负值是不被允许的。
content
基于 flex 的元素的内容自动调整大小。
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 |
灵活的框布局 | Flexible Box Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。