Что необходимо сделать с блоком flex-wrap?

Question

[Pavel Khokhlov]

Ребята привет, помогите разобраться. Есть блок с элементами, при изменении размера экрана, элементы уходят на нижнюю строку, необходимо сделать так, чтобы оставшиеся элементы находились по центру, а в нижней строке перенесенный элемент всегда был слева.
justify-content: center; не решает данный вопрос целиком. Он выравнивает и верхний и нижний ряд по центру.

display: flex;
flex-wrap;

Comments

[Ankhena]

У меня вопрос: вы понимаете, что элементы последней строки будут начинаться не под крайним левым из предыдущих строк, а у самого края родителя?

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

Answer 1

[lUser L]

.container:after {
   content: ''; 
   flex: auto;
}

Comments

[Pavel Khokhlov]

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

width: max-content; - не работате

.container {
display: flex;
flex-wrap: wrap;
gap: 30px;
background-color: grey;
max-width: 600px;
}

.container:after {
content: '';
flex: auto;
}

[lUser L]

Habrpavel, дай ссылку на codepen

[Pavel Khokhlov]

https://codepen.io/Paul-Kh/pen/YzZQyZJ

[lUser L]

Habrpavel, предлагаю заменить justify-content: center; наjustify-content: space-between; и при надобности через медиа запросы при нужной ширине изменить на center

demo: https://codepen.io/5h4dy_s/pen/QWpgKor

[Pavel Khokhlov]

Интересный получается расклад, первый падает куда надо, второй летит под третий )

https://codepen.io/Paul-Kh/pen/YzZQyZJ

[lUser L]

Habrpavel, вот так - https://codepen.io/5h4dy_s/pen/QWpgKor

[Antony Bark]

Эмиль 🔥, Эмиль, известная абревиатура в вашем девизе это троллинг или что-то из кодописания? Извините за личный вопрос. Спасибо