align-items: в чем разница между flex-start и Stretch?

Question

Подскажите, пожалуйста, align-items: в чем разница между flex-start и Stretch?

.container {
  height: 500px;
  padding: 10px;
  margin: 50px auto;
  background: #eee;
  display: flex;
  align-items: flex-end
}

.container .box {
  padding: 10px;
  width: 200px;
  height: 200px;
  background-color: #fff;
}

<div class="container">
  <div class="box"></div>
</div>

Answer 1

Вы не увидите никакой разницы, если установите высоту для вашего элемента.

stretch

Элементы Flex растягиваются таким образом, чтобы поперечный размер поля поля элемента совпадал с линией при соблюдении ограничений ширины и высоты. ^ref

В вашем случае с растяжением ничего не произойдет из-за установленной вами высоты.

flex-start

Края поля поперечного начала гибких элементов выровнены с краем перекрестия начала линии. ^ref

Это просто выравнивание элемента сверху.Опять же, ничего не произойдет визуально, так как это как-то поведение по умолчанию (не значение по умолчанию) .

.container {
  display:inline-flex;
  width:200px;
  height:200px;
  border:2px solid;
}

.container > span {
  width:100px;
  height:100px;
  background:red;
}

<div class="container" style="align-items:flex-start">
  <span></span>
</div>
<div class="container" style="align-items:stretch">
  <span></span>
</div>

Теперь удалите ограничение по высоте, и вы увидите разницу:

.container {
  display:inline-flex;
  width:200px;
  height:200px;
  border:2px solid;
  vertical-align:top;
}

.container > span {
  width:100px;
  min-height:100px;
  background:red;
}

<div class="container" style="align-items:flex-start">
  <span></span>
</div>
<div class="container" style="align-items:stretch">
  <span></span>
</div>