При использовании 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
