У меня есть список элементов, которые я хотел бы разместить в столбцах рядом друг с другом. Я не знаю, сколько там будет предметов, поэтому у меня не может быть фиксированной высоты. Я хочу, чтобы они как можно лучше заполнили пространство вот так:

#parent {
  background-color: firebrick;
  max-height: 200px; /* <-- eliminate */
  display: flex;
  flex-flow: column wrap;
}

.child {
  background-color: #fff;
  height: 30px;
  width: 100px;
  margin: 10px;
  padding: 3px;
}
<div id="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

Поэтому я в основном хочу, чтобы это было выше, но без max-height на #parent, но когда я его удалю, они будут просто в одной широкой колонке.

0
leonheess 8 Сен 2020 в 16:36

1 ответ

Лучший ответ

столбцы могут делать следующее:

#parent {
  background-color: firebrick;
  column-width:120px; /* set the width of columns and the number will be automatic */
  column-gap: 20px; /* to replace margin between element */
  padding:0 10px;
}

.child {
  background-color: #fff;
  height: 30px;
  display:inline-block; /* use inline-block because block element are buggy */
  width:100%; /* make them full width so they behave like block */
  margin:10px 0; /* keep only top and bottom margin */
  padding: 3px;
  box-sizing:border-box;
}
<div id="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>
1
Temani Afif 8 Сен 2020 в 14:07