引言
在前端开发中，CSS 布局一直都是我们需要重点研究和掌握的技能之一。而 CSS Flexbox 布局模式，可以让我们在页面布局方面更加灵活、高效和便捷。在本文中，我们将要重点讲解 flex-basis 属性在 Flexbox 中的使用，以及如何通过 flex-basis 属性来控制 Flexbox 元素的基本尺寸。
什么是 Flexbox 布局模式？
Flexbox 是 CSS3 中新增的一种布局模式，它可以让我们以更简单、灵活和直观的方式来布局页面。与传统的布局模式相比，Flexbox 提供了一些新的元素和属性，使得我们可以轻松地在任何设备上实现响应式布局，并且更容易地针对不同屏幕尺寸和设备类型来定制样式。在 Flexbox 布局中，主要涉及到的元素有 Flex 容器和 Flex 子元素。
什么是 flex-basis 属性？
在 Flexbox 布局中，flex-basis 属性用于设置 Flex 子元素的基本尺寸。它指定了每个 Flex 子元素在 Flex 容器中的初始尺寸，它的默认值是 auto。如果没有定义 flex-basis 属性，那么将默认使用元素本身的宽度或者高度。
如何使用 flex-basis 属性？
在 Flexbox 布局中，我们可以通过以下三种方式来设置 flex-basis 属性的取值。
方式一：使用 length 值
flex-basis 属性可以接受任何有效的 length 值，比如像素、百分比、em 等单位。下面是一个示例代码：
.item {
flex-basis: 100px;
}使用上述代码，可以将 .item 元素的基本尺寸设置为 100px。这意味着如果该元素没有其他的 flex-grow 或 flex-shrink 取值，那么它的尺寸就将始终是 100px。
方式二：使用百分比
我们也可以使用百分比值，以 Flex 容器的宽度或高度为基础。下面是一个示例代码：
.item {
flex-basis: 50%;
}使用上述代码，可以将 .item 元素的基本尺寸设置为 Flex 容器宽度的一半。这意味着如果该元素没有其他的 flex-grow 或 flex-shrink 取值，那么它的尺寸将始终是 Flex 容器宽度的一半。
方式三：使用 auto
如果你没有给元素一个具体的尺寸，那么它的 flex-basis 就使用默认的 auto 值。这意味着 Flexbox 将会尽可能地压缩或拉伸子元素来适应布局。
示例代码
最后，让我们来看一下以下示例代码，以更好地理解 flex-basis 属性的用法。
<div class="container"> <div class="item item-1">Item 1</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ---------------- ----------------- ----- ------- ----- -------- ----- ---------- ------ - ------- - ----------- ------ - ------- - ----------- ---- - ------- - ----------- ----- ---------- -- -
使用以上代码，我们可以得到一个 Flexbox 布局，其中有三个子元素。其中 .item-1 元素的基本尺寸为 100px，.item-2 的基本尺寸为 Flex 容器宽度的一半，.item-3 没有设置具体的尺寸，因此它的 flex-basis 使用 Flexbox 的默认设置 auto，并且因为它设置了 flex-grow: 1，所以它将占据剩余的空间。如下图所示：
总结
在 Flexbox 布局中，flex-basis 属性可以让我们更加灵活地控制元素的基本尺寸。我们可以使用像素、百分比或 auto 等方式来设置 flex-basis 属性的取值，并且可以让元素具备能够响应式布局的特性。Flexbox 布局模式的学习和掌握，将会在前端开发中带来很多便利和提高工作效率的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd973495b1f8cacdce73ef