Как выровнять перенесенный блок на новую строку flex?

Question

[Дмитрий]

Добрый день!
Подскажите, пожалуйста, как заставить перенесенные блоки на новую строку брать ширину блоков, которые находятся выше.
Сетка построена на FlexBox, в одну ширину выводится 4 карточки, при сжимании до выставленной минимальной ширины блоки переносятся на новую строку, в итоге мы получаем 3 карточки, 4 перенеслась вниз.
Но 4 карточка занимает все 100% строки, что не есть хорошо. Подскажите, как сделать так, чтобы перенесенный блок брал ширину верхних блоков.
Выставленная минимальная ширина 261px и flex: 1 1 25%, распределили место строки на 4 колонки.
Так как блокам не задана конкретная ширина, а лишь минималка 261px, соответственно перенесенный 4-й блок заполнит всю ширину строки.
Если задать конкретную ширину блокам, тогда блоки не заполняют всю ширину при уменьшении страницы, с правой стороны появляется пустота, да и адаптивности нет потом.
Как можно это вылечить?
код:

.conteiner {
   display: flex;
   flex-wrap: wrap;
}
.shortstory {
    flex: 1 1 25%;
    min-width: 261px;
    padding: 0 10px 20px 10px;
}

Comments

[Антон Муравьев]

Можете ссылку с проектом на jsfiddle кинуть? С частью только из CSS всю картину не увидишь.

[Дмитрий]

Антон Муравьев,

Попробуйте растягивать фрейм с примером, чтобы увидеть все

[Дмитрий]

Спасибо за ответ!
Но не то немного, я так делал.
Вот что получается если задать max-width:

Answer 1

[Антон Муравьев]

Как Вам такое, например? Лучше открыть на самом сайте, чтоб Вы проверили изменение ширины

Comments

[Дмитрий]

Измучился этим Flex-ом...
Все равно пустота появляется при изменении ширины страницы, так как колонки должны заполнять всю ширину и выстаиваться адаптивно.

[Антон Муравьев]

Дмитрий Я правильно понимаю, что Вы ожидаете нечто такое?

[Антон Муравьев]

Дмитрий Соответственно, чем больше блоков, тем больше их соберется внизу с расстояниями между друг другом Ypx? Так?

[Антон Муравьев]

Может быть margin: auto; Вас устроит.

[Александр]

flex-grow: 1; /* <----- Самая важна часть*/
;)))

[Дмитрий]

Антон Муравьев, Спасибо большое за время и помощь!
Но это все я знаю. Но немного не то.
Ладно, медиа-ми подгоню, там 4 размера получается чтобы адаптировать под устройства.
Походу решения пока такого нет, что очень жаль...

[Антон Муравьев]

Александр, Конечно, логично, что, если поставить 1, то пропусков по бокам не будет, но тогда нижний блок будет растягиваться, что автору вопроса не нравится.

[Антон Муравьев]

Дмитрий, Что ж, мы пытались)

[Александр]

Подскажите, как сделать так, чтобы перенесенный блок брал ширину верхних блоков.

Как обычно слона не увидел )))

[Антон Муравьев]

Александр, Так Вам нужно, чтоб нижний блок растягивался от левой границы всех верхних блоков до правой или чтобы ширина нижних была равна ширине одного верхнего блока? Меняется это показателем flex-grow, если значение 0, то ширина будет статична, если 1, то растянется. Выбирайте

[Александр]

Антон Муравьев, это не мне надо )))

Дмитрий, а выравнивание по левому краю то же плохо?
justify-content: left;

[Антон Муравьев]

Александр, Ой, думал, что автор спрашивал) Поэтому не очень понял текст сообщения) Насчет выравнивания, думаю, что требуется именно центр, судя по референсу на скрине.

[Дмитрий]

Антон Муравьев, Еще раз спасибо! Я думал что может есть какой-то иной вариант...
Вы очень помогли! Попробую позже, может придумаю что-то.

[Антон Муравьев]

Дмитрий, Всегда пожалуйста!

Answer 2

[Дмитрий]

Немного отдохнув, и решение пришло само.
Значит так, все изначально было правильно мною построено, как изначально изложил код -

.conteiner {
   display: flex;
   flex-wrap: wrap;
}
.shortstory {
    flex: 1 1 25%;
    min-width: 261px;
    padding: 0 10px 20px 10px;
}

То есть, колонки имеют минимум ширину 261 пиксель, достигнув предела по ширине лишний блок будет переносится на новый ряд, что в итоге он и будет заполнять его на все 100% так как блокам изначально поставлен flex-grow: 1. Если мы хотим получить полную заполняемость ряда, и чтобы блоки распределяли поровну всю ширину, выставляем flex-grow: 1, а не flex-grow: 0, тогда все будет ок.
Но, что же делать с тем блоком, который переносится и растягивается на всю ширину колонки нарушая внешний вид? Ответ был прост и понятен изначально, просто я немного тупанул.
Я изначально выстроил в один ряд 4 колонки, на странице разместил всего 2 ряда, то есть 8 блоков, но если мы начнем сужать страницу, с каждого ряда отваливается по одному блоку, которые заполнят уже новый созданный ряд и заполнят его поровну, что в итоге получим 2 блока больше других.
Значит стоит сделать вывод, что нужно разместить на странице не 8 блоков, а 12, таким образом при сужении будет отваливаться уже не два блока, а три, что в итоге везде будет поровну.
Вот и решение вопроса.