什么是 Flexbox？
Flexbox 是一种用于布局的 CSS3 模块，它可以让我们更加轻松地创建灵活的、响应式的布局。通过使用 Flexbox，我们可以轻松地对容器中的子元素进行布局，而不必担心它们的大小、数量或位置。
Flexbox 中有许多属性，但其中最重要的属性是 flex-grow，flex-shrink 和 flex-basis。这三个属性是 Flexbox 布局中最核心的属性，它们可以帮助我们轻松地控制元素的大小、位置和排列方式。
flex-grow
flex-grow 属性用于控制元素在容器中的扩展比例。如果一个容器中有多个子元素，那么这些元素的宽度将根据它们的 flex-grow 值进行分配。例如，如果一个元素的 flex-grow 值为 2，而另一个元素的 flex-grow 值为 1，那么前者将获得的宽度将是后者的两倍。
下面是一个简单的示例代码，演示了 flex-grow 属性的用法：
-- -------------------- ---- ------- ---- ------------------ ---- ---------- ------------ ---- ---------- ------------ ---- ---------- ------------ ------ ------- ---------- - -------- ----- - ---- - ------- ----- - ----- - ---------- -- ----------------- ---- - ----- - ---------- -- ----------------- ------ - ----- - ---------- -- ----------------- ----- - --------
在这个示例中，我们创建了一个带有三个子元素的容器，并使用了 flex-grow 属性来控制它们的宽度。.box1 和 .box3 的 flex-grow 值都为 1，而 .box2 的 flex-grow 值为 2。这意味着 .box2 的宽度将是 .box1 和 .box3 的两倍。
flex-shrink
flex-shrink 属性用于控制元素在容器中的收缩比例。如果容器中的空间不足以容纳所有子元素，那么这些元素的宽度将根据它们的 flex-shrink 值进行缩小。例如，如果一个元素的 flex-shrink 值为 2，而另一个元素的 flex-shrink 值为 1，那么前者将缩小的比例将是后者的两倍。
下面是一个简单的示例代码，演示了 flex-shrink 属性的用法：
-- -------------------- ---- ------- ---- ------------------ ---- ---------- ------------ ---- ---------- ------------ ---- ---------- ------------ ------ ------- ---------- - -------- ----- ------ ------ - ---- - ------- ----- - ----- - ------------ -- ----------------- ---- - ----- - ------------ -- ----------------- ------ - ----- - ------------ -- ----------------- ----- - --------
在这个示例中，我们创建了一个带有三个子元素的容器，并使用了 flex-shrink 属性来控制它们的宽度。容器的宽度为 300px，而子元素的宽度总和超过了这个值。因此，这些元素将根据它们的 flex-shrink 值进行缩小。.box1 和 .box3 的 flex-shrink 值都为 1，而 .box2 的 flex-shrink 值为 2。这意味着 .box2 的宽度将缩小的比例将是 .box1 和 .box3 的两倍。
flex-basis
flex-basis 属性用于设置元素的初始大小。它可以设置一个固定的值，也可以使用关键字 auto 来自动计算元素的大小。如果一个元素的 flex-basis 值为 0，那么它的大小将根据它的内容进行计算。
下面是一个简单的示例代码，演示了 flex-basis 属性的用法：
-- -------------------- ---- ------- ---- ------------------ ---- ---------- ------------ ---- ---------- ------------ ---- ---------- ------------ ------ ------- ---------- - -------- ----- - ---- - ------- ----- - ----- - ----------- ------ ----------------- ---- - ----- - ----------- ----- ----------------- ------ - ----- - ----------- ---- ----------------- ----- - --------
在这个示例中，我们创建了一个带有三个子元素的容器，并使用了 flex-basis 属性来控制它们的初始大小。.box1 的 flex-basis 值为 100px，.box2 的 flex-basis 值为 auto，.box3 的 flex-basis 值为 50%。这意味着 .box1 的宽度将始终为 100px，.box2 的宽度将根据其内容进行计算，.box3 的宽度将始终为容器宽度的一半。
总结
在 Flexbox 布局中，flex-grow，flex-shrink 和 flex-basis 是最核心的属性。它们可以帮助我们轻松地控制元素的大小、位置和排列方式。通过学习这些属性，我们可以更加灵活地创建响应式的布局，并为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6550680f7d4982a6eb9407a4