подскажите можно ли лишь с одного css сделать следующее:
есть много записей вида
<div>текст</div>
требуется вывести их в несколько столбцов, причем
записи располагаются так, чтобы занять всю ширину блока в котором содержатся указанные записи
записи располагаются сверху вниз слева направо (а не слева направо сверху вниз)
С одной стороны для части задач подходит display: flex
, но в каждом пункте возникают некоторые проблемы
чтобы расположить записи по всей ширине блока в котором содержатся указанные записи надо использовать
justify-content: space-between;
но в этом случае, если столбцов 3, а записей 5, то 2 последние записи будут как бы выходить из столбцов
.block {
width: 200px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.block div {
width: calc(100% / 3 - 10px);
margin: 5px;
background: orange;
}
<div class = 'block'>
<div>текст 1</div>
<div>текст 2</div>
<div>текст 3</div>
<div>текст 4</div>
<div>текст 5</div>
</div>
- если использовать свойство
column
вместоrow
дляflex-flow
, то без ограничения высоты блока несколько рядов не получится
.block {
width: 200px;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
}
.block div {
width: calc(100% / 3 - 10px);
margin: 5px;
background: orange;
}
<div class = 'block'>
<div>текст 1</div>
<div>текст 2</div>
<div>текст 3</div>
<div>текст 4</div>
<div>текст 5</div>
</div>
Подскажите, есть ли способ как-то обойти эти ограничения?