Flexbox align-items:基线工作,但align-self:基线不工作.为什么？

Question

我似乎在观察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上进行了测试,它们似乎都显示出相同的结果.

Answer 1

解

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

说明

Flex容器的初始设置是align-items: stretch.

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

这就是您的布局中发生的事情.除了,你已经通过申请覆盖align-items: stretch了一个弹性项目(label)align-self: baseline.

当其他弹性项目伸展时,标签有一条baseline指令 - 但没有参考点.

从规格:

8.3.交叉轴对齐:align-items和align-self 属性

baseline

如果弹性项的内联轴与横轴相同,则此值与之相同flex-start.

否则,它参与基线对齐:线上所有参与的弹性项目对齐,使其基线对齐,并且其基线与其交叉开始边缘边缘之间距离最大的项目与交叉开始边缘齐平.这条线.

好吧,让我们打破这个:

• 第一行不适用.在这种情况下,flex项的内联轴与主轴(水平)相同,而不是横轴(垂直),因此 baseline不解析flex-start.

• "...线上所有参与的弹性项目都是对齐的,这样它们的基线对齐......"嗯,只有一个项目具有基线对齐.没有其他基准可供参考.显然,浏览器会回到flex-start这种情况下(但我还没有看到这种行为的官方参考).

其他规范语言与此问题无关,但在此相关文章中有详细介绍:flex-start和baseline之间的区别是什么？