css中flex-basis的使用

概念

1、flex-basis指定了flex元素在主轴方向上的初始尺寸。

2、如果不使用box-sizing来改变盒子模型，则该属性决定了flex元素内容盒的宽度或高度(取决于主轴的方向)的大小。

语法

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

/*Intrinsicsizingkeywords*/
flex-basis:fill;
flex-basis:max-content;
flex-basis:min-content;
flex-basis:fit-content;

/*Automaticallysizebasedontheflexitem’scontent*/
flex-basis:content;

/*Globalvalues*/
flex-basis:inherit;
flex-basis:initial;
flex-basis:unset;

实例

在列模式下，flex-basis变成了高度，因为容器高度为 100px，这里把子元素高度设置成了 30px 总计 90px 来效果：

.flex{
flex-direction:column;
}

.flex>*{
flex-basis:30px;
}

以上就是css中flex-basis的使用，希望对大家有所帮助。更多css学习指路：css教程