CSS Flexbox 是一种强大的布局模式，可以让开发者轻松地创建灵活的、响应式的布局。其中一个常见的需求就是在 Flexbox 中设置元素之间的比例，本文将详细介绍如何实现这一功能，并提供示例代码和指导意义。
基本概念
在 Flexbox 中，我们可以使用 flex 属性来设置元素的比例。这个属性有两个值，分别是 flex-grow 和 flex-shrink。它们的作用分别是：
flex-grow：指定元素应该在可用空间内占据多少比例。默认值为 0，表示元素不会增长。flex-shrink：指定元素在空间不足时应该缩小多少比例。默认值为 1，表示元素会缩小。
可以将 flex 属性的两个值合并为一个值，如下所示：
flex: 1 1;
这个值的意思是，元素在可用空间内占据相同的比例，并在空间不足时等比例缩小。
设置元素比例的方法
均分空间
如果要在 Flexbox 中均分空间，可以使用 flex-grow 属性。假设有三个元素，它们的 flex-grow 值相同，如下所示：
.container {
display: flex;
}
.item {
flex-grow: 1;
}这样，三个元素就会均分容器的可用空间。如果其中一个元素的 flex-grow 值是 2，另外两个元素的值都是 1，那么这个元素会占据剩余空间的 2/3。
按比例分配空间
如果要按比例分配空间，可以使用 flex-basis 属性和 flex-grow 属性。假设有两个元素，它们的比例是 2:1，如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- - ----------------- - ----------- ------- ---------- -- - ---------------- - ----------- ------- ---------- -- -
这里使用了 flex-basis 属性来指定元素的初始大小，然后使用 flex-grow 属性来指定元素在可用空间内占据的比例。这样，第一个元素会占据 2/3 的空间，第二个元素会占据 1/3 的空间。
固定大小和比例
如果要在 Flexbox 中设置元素的固定大小和比例，可以使用 flex-shrink 属性。假设有两个元素，一个元素的固定大小是 100px，另一个元素的固定大小是 50px，它们的比例是 2:1，如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- - ----------------- - ------ ------ ------------ -- - ---------------- - ------ ----- ------------ -- - ----------------- - ---------- -- - ---------------- - ---------- -- -
这里使用了 width 属性来指定元素的固定大小，然后使用 flex-shrink 属性来禁止元素缩小。最后，使用 flex-grow 属性来指定元素在可用空间内占据的比例。
总结
在 Flexbox 中设置元素间的比例，可以使用 flex-grow 和 flex-shrink 属性来实现。如果要均分空间，可以使用 flex-grow 属性；如果要按比例分配空间，可以使用 flex-basis 和 flex-grow 属性；如果要设置固定大小和比例，可以使用 flex-shrink 和 flex-grow 属性。
通过灵活地使用这些属性，我们可以轻松地创建出各种不同的布局效果。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657154e2d2f5e1655da033a2