Всем привет..Прошу вашей помощи. Не опытен в програмировании.
Есть задача, сделать резиновые колонки с непостоянным количеством (от 1 до 4 ) и резиновым списком от левого края до правого колонки. Также список может состоять из одной или двух колонок по выбору, в чем и заключается сложность, когда список делаю из двух колонок вся оснавная колонка растягивается и сжимаются соседние.
Макет:
если пригодится, пример моих мучений
<div class="col1">
<div class="header">Заголовк списка
<ul class="list_col">
<li class="on">Спискок</li>
<li class="on">Спискок</li>
<li class="on">Спискок</li>
<li class="on">Спискок</li>
<li class="on">Спискок</li>
</ul><
</div>
</div>
<div class="col">
<div class="header"Ззаголовк списка
<ul class="list_col2">
<li class="on">Спискок</li>
</ul>
</div>
</div>
.flex {
display: flex;
flex-direction: row;
flex-wrap: nowrap ;
justify-content: center ;
align-items: flex-start;
}
.col {
flex-grow:1;
border: 1px solid black;
color: white;
}
.col:empty {
display: none;
}
.header {
font-size: calc(1rem + 0.80vw);
background: #212124;
border: 6px solid black;
padding: 0;
color: black;
white-space: nowrap;
}
.header ul li {
border: 1px solid black;
font-size: calc(1rem + 1.23vw);
}
.on {
background: green;
}
Простой
