CSS flex-basis属性

CSS flex-basis属性指定一个项目的初始长度，即在没有任何flex-grow或flex-shrink属性影响时，项目的长度为多少。该属性默认值为auto，表示项目的长度由其内容决定。

语法

flex-basis: <length> | auto | initial | inherit;

该属性的值可以是<length>、auto、initial或inherit。

• <length>：指定一个具体的长度值。
• auto：表示项目的长度为其内容所需的长度。
• initial：表示使用默认值。
• inherit：表示继承父元素的flex-basis值。

示例

下面是一例使用了flex-basis属性的CSS代码。在其中，我们指定了一个弹性盒子，其内含三个项目，分别占据三分之一的宽度。该示例中，我们将第一个项目的flex-basis属性设置为200px，也就是在不考虑其他因素的情况下，该项目的宽度始终为200px。

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 calc(33.33% - 10px);
  margin: 5px;
}

.item1 {
  flex-basis: 200px;
}

在这段代码中，我们使用了calc()函数，将三个项目的宽度设置为同时适应容器大小并有间距的值（即33%）。而使用flex-basis属性，我们则固定了第一个项目的宽度为200px。

注意事项

• 如果flex-basis属性与width属性同时存在，优先使用width属性。
• 如果某个项目的宽度超出了容器宽度，且没有指定flex-grow或flex-shrink属性，则项目的宽度将会被压缩。如果指定了flex-shrink属性，则会使用该属性压缩项目宽度。
• 如果flex-basis属性为auto，则项目宽度将由其内容来决定。如果项目具有最小和最大宽度限制，则该值将在两者之间拓展。
• 一般来讲，如果只是想要指定弹性盒子内项目的初始宽度，应该使用flex-basis属性。如果想要在弹性盒子内进行自适应布局，则可以使用flex属性。

结论

CSS flex-basis属性定义了项目的初始宽度，该值可以是一个具体的长度值，也可以使用auto表示由内容决定，或使用initial表示使用默认值。该属性与flex-grow和flex-shrink属性一起，决定了项目的最终宽度。在实际应用中，应根据具体的布局需要，灵活运用flex-basis属性。