@dimoff66
Кратко о себе: Я есть

Как сделать равномерное распределение во флекс контейнере с промежутками?

Есть блок с дисплей: flex и flex-flow: row wrap, в нем может содержаться произвольное количество элементов. У всех у них стоит flex-grow: 1, чтобы они равномерно растягивались во всю длину контейнера.
Как грамотнее всего сделать между ними пространство, например в 5px? Понятно что margin-left кривое решение, так как придется обнулять его у крайнего элемента. Есть что-то более красивое из флекс?
  • Вопрос задан
  • 142 просмотра
Решения вопроса 1
KornevaViktoria
@KornevaViktoria
Frontend Developer
Дмитрий

Почему просто не указать для элемента margin с помощью :not(:last-child)? или подобрать nth-child (если вдруг будет несколько строк)

Понятно что margin-left кривое решение, так как придется обнулять его у крайнего элемента.


.item:not(:last-child) { margin-right: 5px; }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
frammmm
@frammmm
Контейнеру
margin: 0 -2.5px;

Элементу
margin: 0 2.5px;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы