html - 对齐元素 : what is the difference between flex-start and 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 items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.^ref

在您的情况下，由于您设置的高度，拉伸(stretch)不会发生任何事情。

flex-start

The cross-start margin edges of the flex items are flushed with the cross-start edge of the line. ^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>