HTML Flexbox Stretch: разница между «Align-Items» и «Align-Content» [Duplicate] ⇐ Html

[Anonymous]

Уважаемые Stackoverflowers, < /p>
При использовании Flexbox мы иногда хотим растянуть наши элементы Flexbox. Тем не менее, я не могу найти практическую разницу между: < /p>

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

align-items: stretch;
< /code>
и < /p>
align-content: stretch;
< /code>
Возьмите, например, код ниже. Оба Flexbox показывают один и тот же результат. Может ли кто -нибудь помочь объяснить разницу? Предпочтительно с рабочим примером, где обмену двумя изменится? < /P>
Заранее спасибо!




Document


.container{
display: flex;
height: 400px;
width: 400px;
flex-wrap: wrap;
border: 2px solid black;
margin: 10px;
justify-content: space-evenly;
}

.item {
background-color: rebeccapurple;
width: 100px;

border: 1px solid black;
}

/* These are the same. Is there any scenario where they are not? */
#topContainer{
align-items: stretch;
}

#bottomContainer {
align-content: stretch;
}

Подробнее здесь: https://stackoverflow.com/questions/795 ... gn-content