Как сделать пространство между элементами внутри контейнера div

Question

У меня есть flex-контейнер, который будет динамически заполняться элементами. Контейнер не имеет фиксированной ширины (я использую max-width: max-content;) и может содержать столько элементов, сколько я хочу.Проблема в том, что мне нужно расстояние между этими элементами, но не нужно расстояние слева и справа между элементом и контейнером.

Конечно, я могу сделать это с .element{margin-right: 10px} и .element:last-child{margin-right: none;}, но есть ли способ добиться этого без псевдоклассов и JS?

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

Answer 1

Вы можете использовать flex со свойством column-gap.

Кроме того, установка justify-content: space-between обеспечит равномерное пространство между элементами, если ширина родительского контейнера увеличится.

.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>

Answer 2

Используйте противоположный подход к тому, который вы уже предложили.Установите все элементы, кроме первого, чтобы осталось поле.

Затем вы можете использовать селектор брата:

.container {
  display: inline-flex;
  border: solid 1px red;
}

.element {
  background: yellow;
}

.element + .element {
  margin-left: 20px;
}

<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 class="element">my element</div>
</div>

Answer 3

Контейнер не имеет фиксированной ширины (я использую max-width: max-content;) и может содержать столько элементов, сколько я хочу.

Вы можете использовать inline-flexконтейнер, потому что встроенные элементы поместятся в его содержимое и останутся в одном ряду.

Мне нужно расстояние между этими элементами, но не нужно расстояние слева и справасторона между элементом и контейнером.

Вы можете установить, например, margin: 10px для элементов flex , а затем установить margin-left: 0 для первого элемента flex и margin-right: 0 до последнего flex item - см. Демонстрацию ниже:

body {
  margin: 0;
}

.container {
  display: inline-flex;
  background: cadetblue;
}

.element {
  margin: 10px;
  background: pink;
  padding: 5px;
}

.element:first-child {
  margin-left: 0;
}

.element:last-child {
  margin-right: 0;
}

<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 class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
</div>

Answer 4

Я нашел многостолбцовый макет CSS https://www.w3schools.com/CSS/css3_multiple_columns.asp, это, наверное, то, что я искал.