Как циклом вывести список слов в блоке DIV, чтобы он формировался по вертикали сверху-вниз, а если не помещался в блок, перемещался вправо создавая новую колонку заполняя ее сверху-вниз, и так далее.
2 ответа
Вот самый оптимальный вариант такого позиционирования элементов:
div {
display: inline-flex;
flex-flow: column wrap;
align-items: flex-start;
align-content: flex-start;
height: 100px;
}
span {
margin: 5px;
flex: 0 1 auto;
align-self: flex-start;
}
<div>
<span>word 1</span>
<span>word 2</span>
<span>word 3</span>
<span>word 4</span>
<span>word 5</span>
<span>word 6</span>
<span>word 7</span>
<span>word 8</span>
<span>word 9</span>
</div>
upd. = комментарий: Допустим мне нужно третьему и восьмому элементу задать свой цвет, как это реализовать?
div {
display: inline-flex;
flex-flow: column wrap;
align-items: flex-start;
align-content: flex-start;
height: 100px;
}
span {
margin: 5px;
flex: 0 1 auto;
align-self: flex-start;
}
div>span:nth-child(3), div>span:nth-child(8) {color:red;}
<div>
<span>word 1</span>
<span>word 2</span>
<span>word 3</span>
<span>word 4</span>
<span>word 5</span>
<span>word 6</span>
<span>word 7</span>
<span>word 8</span>
<span>word 9</span>
</div>
-
Огромное Вам спасибо! Если можно, еще подскажите пожалуйста. Допустим мне нужно третьему и восьмому элементу задать свой цвет, как это реализовать? 4 мар 2021 в 12:31
-
.container {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-auto-flow: column;
width: 12rem;
}
.container > div {
width: 33.33%;
}
<div class="container">
<div>word 1</div>
<div>word 2</div>
<div>word 3</div>
<div>word 4</div>
<div>word 5</div>
<div>word 6</div>
<div>word 7</div>
<div>word 8</div>
<div>word 9</div>
</div>