对齐项目:弹性启动和拉伸有什么区别

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

如果您将高度设置为元素。

拉伸

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>