Я пытаюсь иметь несколько элементов под друг другом в контейнере с установленной высотой. Затем элементы будут перемещаться рядом друг с другом, если не осталось места.
Это идея:
Я пытаюсь достичь этого, используя flexbox, контейнер с установленной высотой, направление установлено на column и flex-wrap равно wrap:
Проблема заключается в том, что между столбцами имеются большие пробелы.
Я попробовал установить как justify-content, так и align-items на flex-start, но это, вероятно, значение по умолчанию.
Есть ли способ решить это?
Вот код:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
flex-direction: column;
background-color: #ccc;
}
.items {
width: 100px;
height: 100px;
margin: 10px;
background-color: tomato;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
padding: 15px;
}<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
</div>