Почему предметы гибки расширяются вертикально в моем контейнере из гибкого круга? ⇐ Html

[Anonymous]

У меня есть следующая настройка CSS с использованием Flexbox: < /p>

Код: Выделить всё

.container {
width: 350px;
height: 500px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
align-content: stretch;
align-items: stretch;
}

.container div {
width: 80px;
font-size: 2rem;
text-align: center;
background-color: lightblue;
}< /code>
  

1
2
3
4
5
6

< /code>
< /div>
< /div>
< /p>
Когда я добавляю несколько элементов в контейнер, они обертывают в несколько строк, как и ожидалось. Тем не менее, каждый элемент [b] растягивает вертикально [/b], и я хочу понять, почему это происходит. заполнить поперечное оси (вертикальное) пространство контейнера. Затем выровненные элементы: strect < /code> делает отдельные элементы в каждой строке расширять, чтобы заполнить высоту их строки. < /P>
< /blockquote>
Любые пояснения или визуальные объяснения были бы действительно полезны. Align-content 

и Align-items :
В чем разница между выравниванием и выравниванием?


Подробнее здесь: https://stackoverflow.com/questions/796 ... -container