Как получить детей с динамическим c содержимым по центру И одинаковой шириной с помощью flex? - PullRequest
Новая
       8

Как получить детей с динамическим c содержимым по центру И одинаковой шириной с помощью flex?

1 голос
/ 13 июля 2020

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

У меня есть гибкий контейнер, который отображает 4 элемента, содержимое которых генерируется динамически (выбирается в база данных). Значит, я не знаю, что внутри них. Я просто знаю, что это какой-то текст определенной максимальной длины. Так что у меня в основном что-то вроде этого: 

#container {
  display: flex;
  justify-content: center;
}

.item {
  margin: 0 5px;
  background-color: yellow;
}
<div id="container">
  <div class="item">Content</div>
  <div class="item">Long item content</div>
  <div class="item">Short</div>
  <div class="item">Other content</div>
</div>

Я бы хотел, чтобы все предметы были одного размера, который был бы размером самого большого из них (здесь второй ) иметь что-то вроде этого: 

#container {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
}

.item {
  margin: 0 5px;
  background-color: yellow;
  flex: 1 1 0;
  text-align: center;
}
<div id="container">
  <div class="item">Content</div>
  <div class="item">Long item content</div>
  <div class="item">Short</div>
  <div class="item">Other content</div>
</div>

, но, конечно, без изменения ширины и положения контейнера. Я бы хотел, чтобы контейнер имел 100% ширину, а дети адаптировали свой размер для этого рендеринга.

Кто-нибудь знает, как это сделать?

Я работаю с Angular, кстати.

Большое спасибо.

1 Ответ

0 голосов
/ 27 июля 2020

Рассматривали ли вы использование вместо display: grid? 

#container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.item {
  padding: 4px;
  background-color: #aaaa00;
  text-align: center;
}
<div id="container">
  <div class="item">Content</div>
  <div class="item">Long item content</div>
  <div class="item">Short</div>
  <div class="item">Other content</div>
  <div class="item">fifth element</div>
</div>

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

...