Как перенести на другую строку последний div (display: flex;)?

Question

[AleksandrMurkup]

Всем привет.
https://jsfiddle.net/788vepf7/
У меня есть 4 блока в ряд. Они все по 25%. Как мне перенести последний блок на новую строчку, чтобы он был по центру . А первые 3 растягивались по ширине, каждый равен 33.33%.

Answer 1

[Ростислав Игнатенко]

flex-wrap: wrap; //перенос на новую строку
justify-content: center; //центрируем

Comments

[Ростислав Игнатенко]

И не забывайте о том, что у вас еще есть margin, так что при 33,3% у вас на 1-й строке будет не 3 блока, а 2.

[AleksandrMurkup]

lepard flex-wrap: wrap; // будет переносить все блоки на новую строку, а мне нужно только последний (last-child не работает)

[Ростислав Игнатенко]

AleksandrMurkup: Т.е. вы хотите что-бы в первой строке содержалось n-1 блоков, а последний блок только переносился на другую строку? Т.е. в первой строке 5 блоков, во второй снова же 1?

Если да, то вот пример https://jsfiddle.net/vby14hsb/

[Сергей Горячев]

AleksandrMurkup: https://jsfiddle.net/788vepf7/16/ так?

[AleksandrMurkup]

lepard: Спасибо)

[AleksandrMurkup]

Сергей Горячев: Спасибо)

[Сергей Горячев]

AleksandrMurkup: ему lepard спасибо, это его ответ, просто изобразил графически.

Answer 2

[Islam Ibakaev]

https://jsfiddle.net/passionfruit/c7pqruao/2/