flex-basis 是 CSS 中用于设置弹性盒子（Flexbox）项目在主轴上的初始大小的属性。它定义了项目在弹性容器中沿主轴的初始尺寸，即项目在未进行伸缩放大或缩小的情况下的大小。

基本语法如下：
.selector {
  flex-basis: length | auto | content;
}

  •  length: 指定一个具体的长度值，比如像素（px）或百分比（%）。

  •  auto: 默认值，项目的大小由其内容或者宽度、高度属性决定。

  •  content: 项目的大小由其内容决定。


以下是一些例子：

1. 使用具体的长度值：
    .flex-item {
      flex-basis: 200px;
    }

    这表示项目的初始大小为 200 像素。

2. 使用百分比：
    .flex-item {
      flex-basis: 50%;
    }

    这表示项目的初始大小为父容器宽度的 50%。

3. 使用 auto：
    .flex-item {
      flex-basis: auto;
    }

    这表示项目的初始大小由其内容或者宽度、高度属性决定。

在使用 flex 缩写属性时，flex-basis 通常与 flex-grow 和 flex-shrink 一起使用，以完整地定义项目在弹性容器中的行为。例如：
.flex-item {
  flex: 1 0 200px;
}

这表示项目会根据可用空间等比例放大，不允许缩小，初始大小为 200 像素。


转载请注明出处：http://www.zyzy.cn/article/detail/4181/CSS