Flexbox align-items：基线工作，但是align-self：基线没有。为什么？

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是输出结果的截图：

  

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

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

Answer 1

解决方案

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

说明

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

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

您的布局中发生了什么。 EXCEPT ，您已应用align-items: stretch覆盖了label个align-self: baseline上的baseline。

当其他弹性项目伸展时，标签会有baseline指令 - 但没有参考点。

来自规范：

  

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

     

<强> flex-start

     

如果弹性项的内联轴与横轴相同，则为此   值与baseline相同。

     

否则，它参与基线对齐：所有参与   线上的柔性项目对齐，使其基线对齐，   和基线与其基线之间距离最大的项目   交叉开始边缘边缘与交叉开始边缘齐平放置   这条线。

好的，让我们打破这个：

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

• ＆＃34; ...线上所有参与的弹性项目都已对齐，以使其基线对齐...＆＃34; 嗯，只有一个具有基线对齐的项目。没有其他基准可供参考。显然，在这种情况下，浏览器会回退到{{1}}（但我还没有看到此行为的官方参考）。

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