CSS Flexbox 是一个非常强大的工具，它可以帮助我们实现各种不同的布局方案。其中之一就是元素在空间上的分布比例。
Flexbox 使我们可以控制元素的大小和位置，同时可以使用弹性布局来让元素在父容器内按一定比例分布。
Flexbox 布局
在介绍实现元素在空间上的分布比例之前，让我们先回顾一下 Flexbox 的基本布局原理。
Flexbox 布局是一种弹性布局，在垂直方向和水平方向上都可以进行控制。其核心概念是“flex container” 和 “flex items”。
- Flex Container：弹性容器，包含了所有的 flex items。我们将在 flex container 中定义 flex 项目的布局规则。
- Flex Items：弹性项目，是具体要进行控制的元素。我们需要为每个 flex item 定义相应的 flex 属性来控制它们的布局和分布。
Flex Container 的属性
以下是常用的 Flex Container 属性：
- display：定义弹性容器。默认值是
flex。 - flex-direction：定义主轴的方向。可以是
row、column、row-reverse或column-reverse。 - justify-content：定义弹性项目在主轴上的对齐方式。支持的值包括
flex-start、flex-end、center、space-between和space-around。 - align-items：定义弹性项目在次轴上的对齐方式。支持的值包括
flex-start、flex-end、center、baseline和stretch。 - align-content：定义多行弹性项目在交叉轴上的对齐方式。支持的值包括
flex-start、flex-end、center、space-between和space-around。只有在 flex container 多行时才有效。
Flex Items 的属性
以下是常用的 Flex Items 属性：
- flex：定义一个 flex item 的缩放比例。
- flex-grow：定义当前 flex item 的缩放比例。默认值为
0，即不进行缩放。 - flex-shrink：定义当前 flex item 的收缩比例。默认值为
1，即会进行收缩。 - flex-basis：定义当前 flex item 的基准宽度。
- align-self：可以用于覆盖 flex container 的
align-items属性，控制 flex item 在次轴上的对齐方式。
实现元素在空间上的分布比例
现在我们来看一下如何实现元素在空间上的分布比例。通过设置 flex container 的 justify-content 属性和 flex items 的 flex 属性，我们可以实现元素的比例分布。
以下是一个示例代码：
<div class="container"> <div class="item" style="flex: 1;">1</div> <div class="item" style="flex: 2;">2</div> <div class="item" style="flex: 3;">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ------- ------ ----------------- ----- ------------- ----- -展开代码
上面的代码中，我们在 flex container 上设置了 justify-content: space-between，这将会让其内部的 flex items 按照空间分布，从而达到元素在空间上的分布比例的目的。
同时，我们为每个 flex item 设置了不同的 flex 属性值，从而控制了它们在 flex container 内的比例。
指导意义
Flexbox 是一种非常强大的工具，它能让我们以一种相对容易的方式在 Web 上实现各种不同的布局方案。
如果您正在学习前端开发，那么掌握 Flexbox 的知识将是非常重要的。了解其基本布局原理和常用属性，能让您更快地实现各种复杂的布局方案。
除了元素在空间上的分布比例，Flexbox 还有很多其他的应用场景，比如实现元素的垂直居中、实现响应式布局等等。这些都值得您深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67be88b60c976d473a285760
