如何在div容器内的元素之间留出空间 [英] How to make space between elements inside div container

问题描述

我有一个flex容器，它将被元素动态填充. 容器没有固定的宽度(我使用max-width: max-content;)，并且可以包含任意数量的元素.问题是我需要这些元素之间的间距，但是不需要元素和容器之间的左右两侧的间距.

I have a flex-container which will be dynamically filled by elements. Container doesn't have fixed width (I use max-width: max-content;) and can contain as many element as I want. The problem is that I need spacing between these elements, but don't need spacing on the left and right side between an element and the container.

我当然可以用.element{margin-right: 10px}和.element:last-child{margin-right: none;}做到这一点，但是有没有伪类和JS的方法吗?

Of course I can do it with .element{margin-right: 10px} and .element:last-child{margin-right: none;}, but is there a way to achieve it without pseudo-classes and JS?

<div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  ...
  <!-- nubmer of elements changing -->
  ...
</div>

推荐答案

您可以将flex与column-gap属性一起使用.

You can use flex with the column-gap property.

此外，如果父容器的宽度增加，设置justify-content: space-between将确保元素之间的均匀空间.

Also, setting justify-content: space-between will ensure an even space between elements if the width of the parent container increases.

.container {
  display: flex;
  column-gap: 20px;
  justify-content: space-between;
}

.element {
  background: yellow;
}

<div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
</div>

这篇关于如何在div容器内的元素之间留出空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！