Flexbox对齐项目:基线工作,但对齐自我:基线不。为什么? [英] Flexbox align-items: baseline works, but align-self: baseline doesn't. Why?
问题描述
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项目都会扩展容器的整个横轴长度。
这就是布局中发生的事情。您在一个弹性项目( 拉伸,标签有一个 来自spec: 8.3。交叉轴对齐: 如果flex项目的内嵌轴与交叉轴相同,则 否则,它参与基线对齐:行上的所有参与 第一行不适用。在这种情况下,flex项目的内联轴与主轴(水平)相同,而不是交叉轴(垂直),所以 label)上覆盖了
align-items:stretch
),通过应用 align-self:baseline
。
基准
指令–但是没有参考的地方。
align-items
和 align-self
属性 a>
基准
的值与 flex-start
。
的弹性项目对齐,使得它们的基线对齐,
和基线与其
交叉开始边缘边缘与交叉开始边缘
齐平。
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
andalign-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 toflex-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屋!