如何让父母与孩子之间或每个孩子之间的差距相同？

Question

我想创建一个Flexbox组件，每个子组件之间的间距以及父子组件之间的间距都相同。它类似于“空间均匀”，但我不想在弹性盒中使用静态高度值。我怎样才能创建这个弹性盒？

<Col>
  {/* child components */}
</Col>

我尝试使用“gap”属性来制作它，但它不包含父组件和子组件之间的空间。 我还在“justify-content”属性中尝试了“space-evenly”选项，但它没有任何空间，除非我输入高度的静态值。 如何做到间距均匀，同时自动调整子组件的高度？

Answer 1

在 CSS 中，您可以使用属性“justify-content”。此属性的一个选项是“space- Between”，它将使用 100% 的空间，但会在对象之间放置相等的空间。您还可以使用具有类似效果的“space-around”或“space-evenly”，因此请尝试一下它们，看看它们是否符合您的标准。

记住这个属性必须在父组件中指定，父组件中必须有“display: flex”。