在使用 CSS Flexbox 布局时，flex-basis 属性是一个非常重要的属性。它用于定义 flex 元素在主轴方向上的初始尺寸，这个尺寸会被其他 flex 元素或者容器的尺寸所影响。在这篇文章中，我们将讨论 flex-basis 属性的使用教程，包括语法、用法、示例以及最佳实践。
语法与用法
flex-basis 属性的语法如下：
flex-basis: <length> | auto;
- <length> 指定元素在主轴方向上的初始尺寸。
- auto 指定元素的尺寸由元素自身决定。
需要注意的是，flex-basis 是一个和 width、height 相似的属性，但是它不一定决定了元素的最终尺寸。如果设置了 flex-basis，那么其实就是初始化元素的尺寸，在 flex 容器布局后，flex-basis 不会影响元素的实际尺寸。实际上，flex-basis 只影响 flex 容器在主轴上的空间分配。
例如，下面的代码：
.item {
flex-basis: 100px;
width: 50px;
}实际上在布局时，该元素的宽度是 50px，而不是 100px。由于 width 属性比 flex-basis 属性具有更高的优先级。在实际应用中，如果要使用 flex-basis 属性，建议使用下面的方式：
.item {
flex: 0 0 100px;
}这个值对应的是：不增长、不缩小、初始尺寸为 100px，这也是 flex-basis 的简写形式。
示例与最佳实践
下面我们通过几个示例来介绍 flex-basis 属性的使用。
示例一：设置初始宽度
<div class="container"> <div class="item item1">Flex Item 1</div> <div class="item item2">Flex Item 2</div> <div class="item item3">Flex Item 3</div> </div>
-- -------------------- ---- ------- ----- - ----------- ------ - ------ - ----------------- ---- - ------ - ----------------- ----- - ------ - ----------------- ------ - ---------- - -------- ----- -
在这个示例中，我们设置了三个元素的 flex-basis 属性为 100px。这样一来，这三个元素在主轴上的初始宽度就确定下来了，而不受它们自身的宽度或者高度的影响。
示例二：设置自适应宽度
<div class="container"> <div class="item item1">Flex Item 1</div> <div class="item item2">Flex Item 2</div> <div class="item item3">Flex Item 3</div> </div>
-- -------------------- ---- ------- ------ - ----------- ------ ---------- -- - ------ - ----------- ------ - ------ - ----------- ------ ------------ -- - ---------- - -------- ----- -
在这个示例中，我们设置了三个元素的 flex-basis 属性，并且使用了 flex-grow 和 flex-shrink 等属性来设置它们在容器上的占比。这样一来，元素的宽度将会自适应容器的宽度，并且按照指定的占比来进行分配和缩放。
示例三：设置自适应高度
<div class="container"> <div class="item item1">Flex Item 1</div> <div class="item item2">Flex Item 2</div> <div class="item item3">Flex Item 3</div> </div>
.item {
flex-basis: auto;
}
.container {
height: 300px;
display: flex;
flex-direction: column;
}在这个示例中，我们将容器的高度设置为 300px，并且将 flex-direction 设置为 column。这样一来，元素的高度将会自适应容器的高度，并且按照指定的占比来进行分配和缩放。
总结
flex-basis 属性是 CSS Flexbox 布局中的一个重要属性，它可以用来定义元素在主轴方向上的初始尺寸，并且可以通过其他属性的设置来实现自适应大小的效果。在实际应用中，建议使用 flex 属性的简写形式来设置元素的大小，以便更好地控制元素在容器中的布局和位置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c7a6145ad90b6d04113c87