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

如果您设置元素高度，您将不会有任何不同。

伸展

拉伸柔性项目，以使该项目的边距框的交叉尺寸与线相同，同时注意宽度和高度限制。 ^ref

对于您来说，由于您设置的高度，拉伸不会发生任何事情。

灵活启动

flex项目的交叉起点边缘与该行的交叉起点齐平。 ^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>

align-items：flex-start和Stretch有什么区别？

1 个答案: