У меня есть два списка, которые расположены рядом.На рабочем столе эти списки будут отображать элементы li в виде столбца.Однако для мобильных устройств я хочу, чтобы li превратились в макет с двумя столбцами с одинаковыми параметрами в каждом столбце.То есть, если всего будет 11 li элементов, это будет один столбец из 6, а другой - с пятью.Не нужно, чтобы 8 элементов в одном столбце, а затем 3 в другом.
Чего я хочу добиться:
- Столбец с максимум пятью элементами li.
- Если в столбце есть список только из пяти элементов, показывать только один столбец с центром.
В моем текущем подходе используется свойство max-height, которое ломает макет на мобильном устройстве, но это единственныйподход, с которым я сталкивался, какие работы.
Пример кода:
.main__wrapper{
display:flex;
flex-direction: row;
}
.wrapper-one{
padding-left:40px;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
text-align:center;
}
ul li{
font-size: 1rem;
overflow: hidden;
}
@media (max-width:576px) {
ul{
-webkit-flex-flow: wrap column;
text-align: center;
flex-flow: wrap column;
max-height: 400px;
border: 1px solid red;
}
ul li{
max-width: 50%;
}
}
<div class="main__wrapper">
<div class="wrapper-one">
<h3>Heading 1</h3>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<div class="wrapper-one">
<h3>Heading 2</h3>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
В настоящее время мой список отображается в двух столбцах, если имеется более пяти элементов списка, но max-width: 400px; нарушает макет на мобильном телефоне.Ширина используется для обеспечения максимального 5 в каждом столбце.
iPhone 6/7/8 Plus:
Второй список (типы видео), в этом столбце пять ликов, поэтому я хочу, чтобы он был по центру.
iPhone 6/7/8:
Как видите, структура разбивается на экранах меньшего размера.