CSS | flex-basis 属性

简介

flex-basis 属性用于设置 flex 项目的初始主轴尺寸。它可以设置项目在主轴上的宽度或高度，以便实现弹性布局。

语法

flex-basis: length | auto | content;

• length: 可以是一个具体的长度值（比如 px、em、rem 等），表示项目在主轴上的固定宽度或高度。默认为 auto。
• auto: 表示项目的宽度或高度由其内容决定。
• content: 表示项目的宽度或高度由其内部元素的宽度或高度决定。

示例

HTML

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>

CSS

.container {
  display: flex;
}

.item {
  flex-basis: 200px;
  background-color: coral;
  color: white;
  padding: 10px;
  margin: 5px;
}

在上面的示例中，.container 是一个使用 flex 布局的容器，其中包含三个项目（.item）。通过设置 flex-basis: 200px;，每个项目的初始宽度都被固定为 200 像素。

注意事项

• flex-basis 只在使用 flex 布局的容器中生效，对其他非 flex 元素无效。
• 如果同时设置了 flex-basis 和 width/height 属性，且两者不一样，flex-basis 会覆盖 width/height。
• flex-basis 不包括盒模型的边框、内边距和外边距，仅影响内容区域的尺寸。

更多关于 flex-basis 属性的详细信息，请参考 MDN 文档。