Flexbox对齐项目：基线工作，但对齐自我：基线不。为什么？ [英] Flexbox align-items: baseline works, but align-self: baseline doesn't. Why?

问题描述

我似乎正在观察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;边框：1px纯黑色; margin：0;}

< form class =flex - 形式> < label>标签：< / label> < input type =textplaceholder =/> < button type =submit> Submit< / button>< / form>

以下是输出内容的截图：

正如您所看到的，标签的基线不与其他表单元素保持一致，尽管有 align-self：baseline set。如果我在父容器上使用 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;背景颜色：白色;边框：1px纯黑色; margin：0;}  

< form class =flex - 形式> < label>标签：< / label> < input type =textplaceholder =/> < 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项目都会扩展容器的整个横轴长度。

这就是布局中发生的事情。您在一个弹性项目（ label）上覆盖了 align-items：stretch ），通过应用 align-self：baseline 。



拉伸，标签有一个基准指令–但是没有参考的地方。



来自spec：



8.3。交叉轴对齐： align-items 和 align-self
属性 a>

基准

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

否则，它参与基线对齐：行上的所有参与
的弹性项目对齐，使得它们的基线对齐，
和基线与其
交叉开始边缘边缘与交叉开始边缘
齐平。

好吧，我们来分析一下：

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

  线上的项目是对齐的，使他们的基线对齐...那么，只有一个项目与基线对齐。没有其他的参考基准。显然，在这种情况下，浏览器会回到 flex-start （但是我还没有看到这种行为的官方参考）。

规范语言的其余部分与这个问题无关，但在这篇相关文章中有详细的介绍： 弹性启动和基线有什么区别？

I seem to be observing some confusing behavior with flexbox, specifically when attempting to use align-self: baseline. The basic issue is that it simply doesn’t work; the following snippet demonstrates the problem:

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

Here’s a screenshot of what the output looks like:

As you can see, the label’s baseline is not aligned with the other form elements, despite having align-self: baseline set. If I use align-items: baseline on the parent container, however, I get a different result:

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

Is this correct behavior according to the spec, or is it a bug? If so, why? Is there a workaround? For reference, I’ve tested on Chrome 54, Safari 9.1.2, and Firefox 50 on macOS 10.11.6, and they all seem to exhibit the same results.

解决方案

Solution

If you want baseline alignment for all items, apply align-self: baseline to each or, more simply, set align-items: baseline on the container.

Explanation

An initial setting of a flex container is align-items: stretch.

This means that all flex items will expand the full cross-axis length of the container.

That's what's happening in your layout. EXCEPT, you've overridden align-items: stretch on one flex item (label), by applying align-self: baseline.

While the other flex items stretch, the label has a baseline instruction – but no point of reference.

From the spec:

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

baseline

If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.

Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.

Okay, let's break this down:

• The first line doesn't apply. In this case, the flex item's inline axis is the same as the main axis (horizontal), not the cross axis (vertical), so baseline doesn't resolve to flex-start.

• "...all participating flex items on the line are aligned such that their baselines align..." Well, there's only one item with baseline alignment. There is no other baseline for reference. Apparently, the browser falls back to flex-start in such a scenario (but I haven't seen an official reference for this behavior).

The rest of the spec language is not relevant to this question, but is covered in detail in this related post: What's the difference between flex-start and baseline?

这篇关于Flexbox对齐项目：基线工作，但对齐自我：基线不。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！