具体的使用方式如下:
/* 语法 */
flex-basis: length | percentage | auto;
/* 示例 */
.item {
flex-basis: 200px; /* 设置项目的初始主轴尺寸为200像素 */
}
.container {
display: flex;
}
.item {
flex: 1 1 200px; /* 使用 flex 缩写设置,其中 flex-basis 为200像素 */
}
- length: 使用具体的长度值,如像素(px)。
- percentage: 使用百分比表示的相对值。
- auto: 默认值,项目将根据其内容大小来决定其基准大小。
flex-basis 通常与 flex-grow 和 flex-shrink 一起使用,以确定项目在弹性容器中的行为。在上述示例中,flex: 1 1 200px; 是 flex-grow、flex-shrink 和 flex-basis 的缩写形式,其中 flex-basis 设置了项目的初始主轴尺寸为200像素。
请注意,flex-basis 可以设置为 0,这将使项目在弹性容器中完全占据剩余的空间。这在一些布局中很有用,例如平均分配弹性容器中的项目空间。
转载请注明出处:http://www.pingtaimeng.com/article/detail/6066/CSS