flex-basis 是 CSS 中用于指定弹性盒子(flexbox)中项目的初始主轴尺寸的属性。这个属性定义了项目在分配多余空间之前的基准大小。

具体的使用方式如下:
/* 语法 */
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