Доброй ночи! Столкнулся с интересной задачкой.
Пишу шаблон на bootstrap3, соответственно применяю класс данного фреймворка.
Требуется создать 3 колонки, одна в два раза больше других, если это требуется...
Изначально код:
<div class="wrapper-item">
<div class="container">
<div class="main-block">
<div class="left-item">
<ul>
<li>Пункт меню</li>
</ul>
</div>
<div class="center-item">
<ul>
<li>Пункт меню</li>
</ul>
</div>
<div class="right-item">
<ul>
<li>Пункт меню</li>
</ul>
</div>
</div>
</div>
</div>
Известно что первая колонка (left-item) будет содержать примерно 20-30 пунктов, но не сразу, вторая около 10-15 (center-item), третья около 7-8 (right-item).
Изначально макет будет состоять из трех колонок, равных по ширине. Вот стили.
.main-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
height: 350px;
}
Так должно быть пока количество li - элементов в первой колонке не превысит по высоте, и пункты должны передвинутся правее, разширив колонку родителя в 2 раза, а вторую (center-item) оставить автоматической ширины, сколько останется, а вот третья колонка должна перенестись на следующую строку, т.к. первая колонка увеличилась в размере.
Пытаюсь работать с данными стилями, все в принципе получается, но почему то не работает перенос третьей колонки на следующую строчку.
.left-item {
flex: 2 1 auto;
}
.center-item {
flex: 1 2;
}
.right-item {
flex: 1 2;
}
А соответственно стили списков.
.left-item ul {
height: 350px;
display: flex;
-ms-align-items: stretch;
align-items: baseline;
flex-direction: column;
align-content: baseline;
flex-wrap: wrap;
}
PS: кстати высота не работает от родителя .main-block, каждому ul нужно присваивать высоту почему то....
Помогите как решить?
