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

Добрый день!
Подскажите, пожалуйста, как заставить перенесенные блоки на новую строку брать ширину блоков, которые находятся выше.
Сетка построена на 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;
}

5e7b623fbf60f523629698.png
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
Как Вам такое, например? Лучше открыть на самом сайте, чтоб Вы проверили изменение ширины
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Monachdg Автор вопроса
Немного отдохнув, и решение пришло само.
Значит так, все изначально было правильно мною построено, как изначально изложил код -
.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, таким образом при сужении будет отваливаться уже не два блока, а три, что в итоге везде будет поровну.
Вот и решение вопроса.
Ответ написан
Ваш ответ на вопрос

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

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