css中flex-basis的使
概念
1、flex-basis指定了flex元素在主轴方向上的初始尺寸。
2、如果不使用box-sizing来改变盒子模型,则该属性决定了flex元素内容盒的宽度或高度(取决于主轴的方向)的大小。
语法
代码语言:javascript复制/* 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;
实例
在列模式下,flex-basis变成了高度,因为容器高度为 100px,这里把子元素高度设置成了 30px 总计 90px 来效果:
代码语言:javascript复制.flex {
flex-direction: column;
}
.flex > * {
flex-basis: 30px;
}
以上就是css中flex-basis的使用,希望对大家有所帮助。