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

[Anonymous]

Итак, я начал изучать CSS как новичок. Недавно я изучал flex-box. Мои первоначальные знания о flex-wrap : Wrap; заключается в том, что если переполнение происходит вдоль главной оси (гибкое направление), оно предотвращает это, перенося элементы в следующую строку (предположим, гибкое направление: строка;). Чего я, кажется, не понимаю, так это того, почему оно оставляет пробелы в поперечная ось? Пожалуйста, посмотрите код ниже

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

Display Flex



Flexbox Playground

violet
indigo
blue
green
yellow
orange
red

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

#container {
height : 300px;
width : 80%;
background-color: azure;
margin : 10px auto ;
border : 2px solid black;
display : flex;
flex-direction: row;
flex-wrap: wrap;
}

h1 {
text-align: center;
}

#container div {
height : 90px;
width : 300px;
color  : white;
text-align : center;
font-size: 1.5em;
}

Поскольку моя первоначальная высота элемента была 100 пикселей, я не увидел ничего плохого в поперечной оси. Но затем я попытался уменьшить высоту элемента со 100 пикселей до 50 пикселей и увидел пробелы по поперечной оси (вертикальному направлению). Я этого не ожидал и не мог понять, что вызывает такое поведение. Я прилагаю фотографии для справки. Первый — когда высота элемента равна 100 пикселям first_image, а второй — когда высота уменьшена до 50 пикселей. Second_image

Подробнее здесь: https://stackoverflow.com/questions/793 ... et-to-wrap