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

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

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

/* Specify */

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 值可以是一个数字后面跟着绝对单位例如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 |

例

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: -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