什么是Flexbox？
Flexbox是CSS3的一个强大的布局模式，它允许我们创建更灵活的和可响应的布局，适用于网站的各种设备，如桌面、平板电脑和移动设备。它基于轴线的概念来定位元素，允许我们在网格之内轻松地定位、对齐和分配空间。
Flexbox的主要目标是完美地为容器内的项目分配空间，这样我们就可以创造出更加灵活的布局。
例如，假设我们想创建一个水平居中的主要标题，并在其下方添加一些相邻的元素。这个布局看起来非常简单，但由于浏览器默认的布局设置，它可以变得异常的丑陋。使用Flexbox，我们可以轻松地定位这些元素，而不必担心它们在各种尺寸的屏幕上如何呈现。
什么是flex-basis?
Flexbox布局中的flex-basis属性是指项目在主轴方向上的初始大小。
简而言之，flex-basis属性定义了项目在拉伸和缩小之前所占据的空间。这意味着我们可以定义第一个、第二个以及后续项目的初始大小。
此属性的默认值是auto，这意味着项目的初始大小将根据内容而定。
拓展
flex-basis的值可以是长度、百分比或auto。 通常我们使用长度或百分比值来定义项目的初始大小。
当使用长度值时，我们可以使用任何像素、毫米或其它长度单位。当使用占比值时，我们可以将flex-basis属性设置为一个百分比，这个百分比将根据父容器宽度进行计算。因此，如果我们设置为50%，我们的元素将占用其父容器宽度的50%。
在许多情况下，我们通常希望通过flexbox尺寸变化来自适应现有的网格。这意味着我们的元素可以无缝地适应可用宽度而不会出现意外的延伸或压缩。
让我们看看以下这个例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- - ------ - ----------- ---- -
在这个示例中，我们首先定义了包含我们所有项目的container容器，然后定义了一个items类，它将控制如何分配项目的初始大小。我们设置items类的flex-basis属性为30%。这样，我们就可以确保在容器的可用宽度中，每个项目的大小为30%，并且它们将根据情况进行适当的缩小或拉伸，以确保它们在不同屏幕大小的布局中都能够很好地呈现。
总结
Flexbox是一个强大的CSS3布局模式，允许我们更加灵活地创建和控制我们网站的布局。flex-basis属性是一个非常重要的属性，它允许我们定义每个项目在主轴方向上的初始大小。这种灵活性确保我们始终可以在各种屏幕大小上制作出完美的响应式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64705672968c7c53b0e77d6e