CSS Flexbox 中的 flex-basis 属性详解-JavaScript中文网-JavaScript教程资源分享门户

在 CSS Flexbox 布局中，flex-basis 属性用于设置项目的初始主轴尺寸。本文将详细介绍 flex-basis 属性的用法、特性和示例代码，以帮助大家更好地理解和应用该属性。

flex-basis 属性的语法和取值

flex-basis 属性的语法如下：

flex-basis: <length> | auto;

其中，表示长度值，可以是 px、em、rem 等单位，表示项目的初始主轴尺寸；auto 表示项目的初始主轴尺寸由内容决定，即自适应宽度。

flex-basis 属性的特性

flex-basis 属性的特性如下：

flex-basis 属性只在项目的初始渲染阶段起作用，不影响项目的伸缩性；
当 flex-grow 和 flex-shrink 属性均为 0 时，flex-basis 属性决定了项目的尺寸，此时 flex-basis 属性等同于 width 属性；
当 flex-grow 和 flex-shrink 属性不为 0 时，flex-basis 属性决定了项目在剩余空间中的尺寸占比。

flex-basis 属性的示例代码

下面是一个简单的示例代码，演示了 flex-basis 属性的基本用法：

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

.item1 {
  flex-basis: 200px;
}

.item2 {
  flex-basis: 150px;
}

.item3 {
  flex-basis: 120px;
}

在该示例中，容器采用了 flex 布局，并设置了 flex-wrap 属性为 wrap，即可实现自动换行。项目采用了相同的高度和 margin，但是采用了不同的 flex-basis 值，从而实现了不同的宽度。其中，item1 的宽度为 200px，item2 的宽度为 150px，item3 的宽度为 120px。

总结

flex-basis 属性是 CSS Flexbox 布局中的重要属性，用于设置项目的初始主轴尺寸。本文介绍了 flex-basis 属性的语法、特性和示例代码，希望能对大家理解和应用该属性有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656ef2cbd2f5e1655d742f9f