Как расположить блоки в столбцы по 5 штук?

Question

[danilr]

Завис над такой проблемой - есть динамическое количество блоков, нужно их расположить по 5 штук в столбце, следующие идут в следующий столбец и так далее. P.S. Это меню, блок со списком абсолютом, если это важно.
Пытаюсь сделать так

.menu-block{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.items{
height: 20%;

Эта почти работает, но почему то блок не расширяется на сколько должен, помогите пожалуйста, в чем ошибка?

Answer 1

[Spaceoddity]

Так?
https://codepen.io/nanto-work/pen/eXYLwz

Comments

[danilr]

Видишь ли, у тебя background применен к самим элементам списка, поэтому если их будет меньше 5 в одном столбце, то не будет прямоугольника, будет кривая фигура(надеюсь ты понял о чем я). Если бэкграунд применть к самому ul, то он почему то не растягивается, даже в твоем примере.

[Spaceoddity]

danilr, ну сделай костыль какой-нибудь с псевдо-элементом, например.
Просто я всех вводных не знаю, ну вот к примеру:
https://codepen.io/nanto-work/pen/eXYLwz

[danilr]

Spaceoddity, а вот это просто гениально, Спасибо! Правда до сих пор думаю как это работает)

[Spaceoddity]

danilr, там просто к каждому 5 элементу (начиная с первого) добавляем псевдоэлемент на всю высоту и ширину колонки (100% по ширине и 500% по высоте) с нужным бэкграундом.

[Spaceoddity]

danilr, ну и ещё момент. Флексбоксы всё-таки не предназначены для двухосевого позиционирования (они могут очень гибко выстраивать разметку только по одной оси). Для двухосевого по хорошему нужны гриды. Но у них есть проблемы с совместимостью (IE). Зато ими всё это делается на раз-два:
https://codepen.io/nanto-work/pen/YgzMEx

[danilr]

Spaceoddity, сейчас делал по первому твоему примеру на флексах и понял, что не подходит этот метод. Если посмотреть на макет(1 картинка) то там паддинги у родителя большие, а сами элементы сжимаются в центре( 20% высоты все портит). Придется другой способ искать. Вот по поводу гридов, я с ними еще не работал. Попробовал их, все вышло! Но одна загвостка осталась - высота родителя меняется в зависимости высоты экрана монитора, поэтому дети сильно друг от друга растягиваются. Есть способ их держать в центре блока?

[Spaceoddity]

danilr, там всё есть))
https://codepen.io/nanto-work/pen/YgzMEx

Вот нужные строки:

grid-template-rows:repeat(5, 50px); /*здесь задаёте высоту пункта*/
align-content:center; /* а это свойство как раз выравнивает контент по высоте */

[danilr]

Spaceoddity, спасибо большое! Grid это суперская вещь, что ж я ее раньше не использовал)

Answer 2

[Юпитер Макс]

у синего блока смотрите в стилях, наверняка указана ширина. Если она указана, блок не растянется

Comments

[danilr]

Не задано ширины, вручную даже проставил unset всем. Вот все стили ребенка и родителя:

/*дети*/
.nav-test-list-hd {
    padding: 12px 15px;
    height: 20%;
}
/* класс при открытии не влияет на растягивание*/
.open-menu-hd {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
/* сам блок*/
.menu-tests-hd-list {
    position: absolute;
    z-index: 100;
    background: #1356BC;
    height: 100%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    left: 65px;
    transition: 0.3s;
    line-height: 18px;
    font-size: 14px;
    font-weight: bold;
    padding: 38px 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto;
    min-width: unset;
    max-width: unset;
}