html - Flexbox align-items : baseline works,但是align-self : baseline doesn't.为什么？

我似乎在用flexbox观察到一些令人困惑的行为，特别是在尝试使用align-self: baseline时。基本的问题是它根本不起作用；以下代码段演示了该问题:

.flex-form {
  display: flex;
}

.flex-form label {
  align-self: baseline;
}

input[type=text] {
  border: 1px solid black;
  font-size: 16px;
  margin: 0 10px;
  padding: 5px;
}

button {
  background-color: white;
  border: 1px solid black;
  margin: 0;
}

<form class="flex-form">
  <label>Label: </label>
  <input type="text" placeholder=" " />
  <button type="submit">Submit</button>
</form>

这是输出结果的屏幕截图:

如您所见，尽管设置了align-self: baseline，标签的基线仍未与其他表单元素对齐。但是，如果我在父容器上使用align-items: baseline，则会得到不同的结果:

.flex-form {
  display: flex;
  align-items: baseline;
}

input[type=text] {
  border: 1px solid black;
  font-size: 16px;
  margin: 0 10px;
  padding: 5px;
}

button {
  align-self: stretch;
  background-color: white;
  border: 1px solid black;
  margin: 0;
}

<form class="flex-form">
  <label>Label: </label>
  <input type="text" placeholder=" " />
  <button type="submit">Submit</button>
</form>

根据规范，这是正确的行为还是错误？如果是这样，为什么？有解决方法吗？作为引用，我已经在macOS 10.11.6上的Chrome 54，Safari 9.1.2和Firefox 50上进行了测试，它们似乎都表现出相同的结果。

最佳答案

解决方案

如果要对所有元素进行基线对齐，请对每个元素应用align-self: baseline，或者更简单地说，在容器上设置align-items: baseline。

解释

flex容器的初始设置为align-items: stretch。

这意味着所有 flex 物品都会扩展容器的整个横轴长度。

这就是您的布局中正在发生的事情。除了以外，您已经通过应用align-items: stretch在一个 flex 元素(label)上覆盖了align-self: baseline。

当其他 flex 元素拉伸(stretch)时，标签具有baseline指令-但没有引用点。

从规范:

好吧，让我们分解一下:

第一行不适用。在这种情况下， flex 元素的内联轴与主轴(水平)相同，而与横轴(垂直)相同，因此baseline不能解析为flex-start。

“...该行上所有参与的flex元素都已对齐，以使其基线对齐...”好吧，只有一个元素具有基线对齐。没有其他基准可供引用。显然，在这种情况下，浏览器会退回到flex-start(但是我没有看到有关此行为的官方引用)。

规范语言的其余部分与该问题无关，但在相关文章中详细介绍:What's the difference between flex-start and baseline?

关于html - Flexbox align-items : baseline works,但是align-self : baseline doesn't.为什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40727657/

Baseline

html - Flexbox align-items : baseline works,但是align-self : baseline doesn't.为什么？