Как решить проблему с отступами?

Question

[Wezalal]

Добрый день, помогите как решить проблему с отступами. Есть контейнер в котором расположены flex элементы. Первые и последние элементы в строке должны быть прижаты к краю контейнера. Строки формируются динамически.

Т.е должно получиться как то так:


Пробывал решить отрицательным margin. Однако появляется скролл. Есть вариант решения с добавлением overflow: hidden. Но почему то мне кажется данное решение костылем.

На данном этапе остановился

Помогите решить проблему как расставить блоки по краю контейнера и при этом чтобы не добавлялся скролл. Заранее спасибо.

Comments

[VegasChickiChicki]

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

[Wezalal]

VegasChickiChicki, Отступы фиксированной величины

[Ilya Muromtsev]

Wezalal, что это значит?
Вам показали свойство space-between оно делает так как показано на рисунке

[VegasChickiChicki]

Wezalal, Строки формируются динамически. И как это понимать? Что значит отступы фиксированные?А если будет 3 элемента, какие будут фиксированные отступы, задайте вопрос более четко. При 4 элементах можно попробовать такой вариант:

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block{
  width: calc(25% - 50px);
}

Answer 1

[strelok011]

Не очень понимаю - у Вас красные блоки должны растягиваться по ширине с постоянными отступами? или отступы должны увеличиваться, а блоки быть фиксированными?

Предложу использовать вместо flex grid https://xsltdev.ru/css/grid-guide/grid-5/

Comments

[Wezalal]

Извините, но я плохо объясняю) Отступы должны быть одинаковые, а блоки растягиваться.

[strelok011]

Тогда 2 варианта, которые на ум приходят:
1. grid
2. обертка display: flex, justify-content: space-between.
красный блок без всяких оберток - width: calc(25% - ширина отступа)

Answer 2

[Aetae]

По старинке.
Блоки в контейнер, контейнеру margin-top/left: -{размер отступа}, блокам margin-top/left: +{размер отступа}.
Вроде бы вот вам флекс, а чуть что - костыли всё те же.

Comments

[Wezalal]

Вроде бы так и делал, но скролл появляется

[Aetae]

Wezalal, никакого скролла:
Что-то где-то у вас лишнее в стилях.

Answer 3

[Сергей delphinpro]

Держите



На гридах (CSS Grid) это решается в три строки (а если minmax заюзать, то и адаптив в эти же три строки уместится)

Answer 4

[br000000]

пробовали flex контейнеру добавить ?
justify-content: space-between