简介
CSS Flexbox 是一种灵活的布局模式，可以让我们轻松地创建各种复杂的布局。其中一种常见的应用场景是在一个容器内同时实现固定宽度和自适应剩余宽度分配。本文将介绍如何使用 Flexbox 实现这种布局模式。
实现固定宽度和自适应剩余宽度分配
通常情况下，我们会将固定宽度的元素和自适应剩余宽度分配的元素放在同一个容器内，并希望它们能够水平排列。这时，我们可以使用 Flexbox 中的两个属性：flex 和 flex-grow。
flex 属性用于设置 flex 元素的伸缩比例。默认情况下，所有 flex 元素的 flex 值都为 0，表示它们不会分配任何剩余空间。如果将一个 flex 元素的 flex 值设为一个正整数，则该元素会按照这个数值分配剩余的空间。例如，如果一个元素的 flex 值为 2，而另一个元素的 flex 值为 1，则前者会分配的剩余空间是后者的两倍。
flex-grow 属性用于设置元素在剩余空间分配中所占的比重。默认情况下，所有元素的 flex-grow 值都为 0，表示它们不会分配任何剩余空间。如果将一个元素的 flex-grow 值设为一个正整数，则该元素会按照这个数值分配剩余的空间。例如，如果一个元素的 flex-grow 值为 2，而另一个元素的 flex-grow 值为 1，则前者会分配的剩余空间是后者的两倍。
了解了这些属性后，我们就可以开始使用它们来实现固定宽度和自适应剩余宽度分配的布局了。下面是一个示例：
<div class="container"> <div class="fixed">固定宽度</div> <div class="flexible">自适应宽度</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- - ------ - ------ ------ - --------- - ---------- -- -
上面的示例中，我们首先将容器设为 Flexbox 布局，然后使用 justify-content: space-between; 属性将容器内的元素分别对齐到容器的两侧。接着，我们将一个元素的宽度设为 200px，并将另一个元素的 flex-grow 值设为 1，这样它就会占据容器中剩余的全部空间了。
总结
使用 CSS Flexbox 实现固定宽度和自适应剩余宽度分配的布局，可以让我们更加灵活地控制页面的布局。掌握了 flex 和 flex-grow 这两个属性后，我们就可以轻松地实现各种复杂的布局了。希望本文对大家学习 CSS Flexbox 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df1656f6b2d6eab3a3e1ee