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

ProgramBox

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

Post author:admin
Запись опубликована:2 апреля, 2023
Post category:Вопросы по программированию

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня есть гибкий контейнер, который будет динамически заполняться элементами. Контейнер не имеет фиксированной ширины (я использую 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>

1. Вы могли бы получить последний элемент с помощью javascript, а затем добавить класс к этому элементу, но это более утомительно, чем просто использовать :last-child селектор

2. о да, я забыл добавить, что я не могу использовать JS здесь

3. Кажется, это решение, оно просто еще не работает в разных браузерах (не работает на Хроне) — column-gap: 20px; — developer.mozilla.org/en-US/docs/Web/CSS/column-gap#Flex_layout

4. Кажется, полностью или частично поддерживается — caniuse.com/#search=column-gap

5. @Yas’ka зачем все усложнять, просто используйте псевдоселекторы, вы можете сделать .element:not(:first-child) { margin-left: whatever }

Ответ №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>

Ответ №2:

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

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

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

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

 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>

Ответ №3:

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

Затем вы можете использовать селектор родственных элементов:

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

Ответ №4:

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