在前端开发中，使用 CSS 来布局是必不可少的。而在 CSS 布局中，Flex 布局则是目前最受青睐的一种方式。它采用弹性盒子模型，可以非常方便地实现多种布局效果，包括让子元素按比例分配空间。
在本文中，我们将探讨如何使用 CSS Flex 布局来让子元素按比例分配空间，以及相关的技巧和注意事项。
基础概念
在使用 CSS Flex 布局使子元素按比例分配空间之前，有一些基础概念需要了解。
父容器（Flex 容器）
Flex 布局采用弹性盒子模型，需要在父容器上应用 display: flex; 属性来激活此模型。被应用此属性的元素被称为父容器或者 Flex 容器（Flex Container）。
.parent {
display: flex;
}子元素（Flex 项目）
Flex 容器内的各个元素被称为子元素或者 Flex 项目（Flex Item）。在默认情况下，子元素会被依次排列在 Flex 容器内。
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>
-- -------------------- ---- ------- ------- - -------- ----- - ------ - ------ ------ ------- ------ ----------------- ----- -
主轴和交叉轴
Flex 容器的排列方向可以通过 flex-direction 属性来指定，有以下四个可选值：row、row-reverse、column、column-reverse。默认值为 row。
在此基础上，我们需要使用 justify-content 属性来调整子元素在主轴方向上的对齐方式，以及使用 align-items 属性来调整子元素在交叉轴方向上的对齐方式。
请参考下图：
让子元素按比例分配空间
在了解了基础概念之后，我们开始探讨如何使用 CSS Flex 布局使子元素按比例分配空间。
Flex 布局的属性
在 CSS Flex 布局中，分配空间的主要属性有以下四个：
flex-grow：定义项目的放大比例，默认为 0，即不拉伸。flex-shrink：定义项目的缩小比例，默认为 1，即缩小。flex-basis：定义项目在分配多余空间前的初始大小。flex：是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。
例子
接下来，我们列举一个例子。在此例子中，我们让三个子元素按照 1：2：3 的比例分配 Flex 容器中的空间。
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>
-- -------------------- ---- ------- ------- - -------- ----- - ------------------- - ----- -- ----------------- ---- - ------------------- - ----- -- ----------------- ---------- - ------------------- - ----- -- ----------------- ------ -
实际运行效果如下：
以上示例中，我们设置了第一个元素的 flex 为 1，第二个的为 2，第三个的为 3，因此第三个元素的宽度是前两个元素的宽度之和的 1.5 倍，第二个元素的宽度是第一个元素的两倍，而其中的空间是按照我们预期的 1：2：3 来分配的。
注意事项：
- 确保使用该方法的子元素在同一轴线上。
- 在进行比例计算时，应保证所有子元素的单位是相同的（例如都是像素或者都是百分比）。
结论
在本文中，我们简述了 CSS Flex 布局的基础概念，以及如何使用 Flex 布局来让子元素按比例分配空间。我们希望通过这篇文章能够帮助到初学者掌握常见的 CSS 布局技巧，提升其开发效率。
以上是整篇文章的示例代码，希望在阅读过程中能帮助您更好地理解相关知识点。如果您有任何疑问或者建议，欢迎在评论区里留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c4c759babaf620fb01da7