Как в CSS растянуть блоки на всю ширину родителя, чтобы у них самих при этом была одинаковая ширина?

Question

Всем привет. Я в фронте далеко не мастер, поэтому возможно вопрос глупый.

Есть родительский блок container. В нем может быть разное кол-во дочерних блоков card, расположенных в длину. Задача такая: все блоки card должны быть одинаковой ширины, причем так, чтобы все вместе занимали всю ширину родителя container.

Как это можно реализовать? Вот код css. Пробовал через разные auto и т.д., но больше идей нет. Гуглил, но ничего не нашел.

Вот имеющийся css:

.container {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--index) * 15);
    background: linear-gradient(to left, var(--to), var(--from)); */
    opacity: .6; }

.card {
    height: 100%;
    width: auto;
    background-color: aqua; }

Answer 1

Вы уже начали использовать flex, так что осталось только задать всем карточкам одинаковую ширину и возможность занять весь родительский блок. Для этого задаём им одинаковый flex-basis и flex-grow. В короткой записи flex: 1 0 0px. Это означает что естественная ширина карточки 0px, но она может увеличиваться что бы заполнить всё пространство родителя. Поскольку у всех карточек задан одинаковый flex-grow, то все они получатся равной ширины.

Тут надо следить чтобы у вас не было слишком много карточек или слишком маленький контейнер, поскольку мы задали естественный размер в 0px, то браузер будет честно уменьшать размеры карточек до упора и может получится некрасиво. Если вы заранее знаете меньше какой ширины не стоит уменьшать карточки, то можно указать это значение вместо 0px.

.container {
  display: flex;
  margin: 2em;
  padding: 0;
  text-align: center;
}

.card {
  flex: 1 0 0px;
  list-style: none;
  padding: 0;
  border: 1px solid blue;
}

<ol class="container">
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
</ol>

<ol class="container">
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
  <li class="card">card</li>
</ol>

БЛОГ НА HUSL

Как в CSS растянуть блоки на всю ширину родителя, чтобы у них самих при этом была одинаковая ширина?

Ответы (1 шт):