CSS - установить общую ширину всех дочерних элементов, равную их родителю

Question

Я пытаюсь создать квадрат, содержащий прямоугольники, каждый из которых содержит слово.Общая ширина каждого дочернего прямоугольника должна быть равна родителю, но проблема в том, что я не знаю порядок или длину каждого из слов, и с помощью поискового фильтра я могу динамически обновлять список на стороне клиента, таким образом я могуСтатически не назначайте ширину / padding / поля для каждого из содержащихся прямоугольников.Чтобы проиллюстрировать мою проблему, вот мой текущий код, а также снимок экрана, показывающий, что у меня есть.

<div class="index">
  <!-- heading, filter input and other stuff here -->
  <div class="books">
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <!-- rest of the book divs here -->
  </div>
</div>

Я попытался переместить прямоугольники словав редакторе изображений, чтобы показать, чего я пытаюсь достичь, но это превратилось в беспорядок.По сути, я хочу «выровнять выравнивание» прямоугольников внутри родительского квадрата так, чтобы прямоугольники находились на одном уровне со всеми сторонами родителя.Я предпочел бы использовать width / padding над полями, потому что я хотел бы поддерживать маржу 1px вокруг всех из них.Т.е. серые фоны слов должны увеличиваться по ширине.Если вам нужно увидеть картину того, чего я пытаюсь достичь, дайте мне знать, и я постараюсь переместить их снова.

Также обратите внимание, что я использую Vue.js и Vuetify (прямоугольники слов генерируются v-for), поэтому, если ваш ответ включает в себя конкретные решения Vue / Vuetify, я был бы более чем счастлив.Но ради будущих читателей я также с удовольствием приму ванильные решения HTML / CSS / JS.

Пожалуйста, дайте нам название этого эффекта (если он есть).

Answer 1

Я создал маленькую скрипку, используя flexbox в https://jsfiddle.net/saksham_malhotra/52nz7rpf/

Это поможет вам разложить названия книг, чтобы охватить каждый ряд до конца.

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

Answer 2

Я рекомендую использовать CSS Flexbox для этого поведения макета, так как это в основном строка переноса с определенными правилами выравнивания.

В Интернете много ресурсов Flexbox, но я настоятельно рекомендую " Полное руководство по Flexbox ".

Вот примерно CSS, я думаю, достигнет желаемого результата:

.books {
  /* Flexbox stuff */
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  /* Other stuff */
  background-color: lightgray;
}
.book {
  /* Flexbox stuff */
  flex-basis: content;
  /* Other stuff */
  margin: 1px;
  background-color: darkgray;
}

Вот пример CodePen, использующий этот CSS: https://codepen.io/Da13Harris/pen/PvePxq

Answer 3

Просто согните контейнер div и примените flex к дочернему классу

.books {
  background-color: #333;
  width: 300px;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.book {
  background-color: #fefefe;
  margin: 3px;
  padding: 10px;
  flex: auto;
}

<div class="index">
  <!-- heading, filter input and other stuff here -->
  <div class="books">
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <!-- rest of the book divs here -->
  </div>
</div>