Flexbox align-items: baseline 有效，但 align-self: baseline 无效。为什么？

Question

我似乎观察到 flexbox 的一些令人困惑的行为，特别是在尝试使用 align-self: baseline 时。基本问题是它根本行不通。下面的 sn-p 演示了这个问题：

.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 上进行了测试，它们似乎都表现出相同的结果。

Answer 1

解决方案

如果您想要所有项目的基线对齐，请将align-self: baseline 应用于每个项目，或者更简单地说，在容器上设置align-items: baseline。

说明

弹性容器的初始设置是align-items: stretch。

这意味着所有的弹性项目都会扩展容器的整个横轴长度。

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

当其他 flex 项目伸展时，标签有一个 baseline 指令——但没有参考点。

来自规范：

8.3. Cross-axis Alignment: the align-items and align-self properties

baseline

如果弹性项目的内联轴与交叉轴相同，则 值与flex-start 相同。

否则，它参与基线对齐：所有参与 行上的弹性项目对齐，使得它们的基线对齐， 以及其基线与其基线之间距离最大的项目 交叉起始边距边缘与交叉起始边缘齐平放置 行的。

好的，让我们分解一下：

• 第一行不适用。在这种情况下，flex 项目的 内联轴 与主轴（水平）相同，而不是横轴（垂直），因此 baseline 不会解析为 flex-start。

• “...所有参与的 flex 项目都对齐，使得它们的基线对齐...” 好吧，只有一个项目与基线对齐。没有其他基准可供参考。显然，在这种情况下，浏览器会退回到flex-start（但我还没有看到这种行为的官方参考）。

规范语言的其余部分与此问题无关，但在此相关帖子中进行了详细介绍：What's the difference between flex-start and baseline?