html - 放置在其他容器内时对齐中断

Question

我正在探索 Flexbox 并试图对齐一些元素。以下代码有效并显示了我想要实现的目标(成功的 codepen here ):

.labelinput {
  display: flex;
  flex-flow: row;
  margin: 1px;
}
.labelinput > *:first-child {
  flex-basis: 10em;
  flex-grow: 0;
  flex-shrink: 0;
}
.labelinput > *:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
  border: 3px solid purple;
}

<div class='labelinput'>
  <div>1st input</div>
  <div>this is just a div</div>
</div>
<div class='labelinput'>
  <div>2nd:</div>
  <input type="text" name="foo" value="this is an input box" />
</div>

上面的代码产生了如下所示的很好对齐的输出:

我对上面代码的解读是它有效，因为每个 div 中的第一个 child 。具有确定的大小 (10em) 并且完全不灵活(flex-grow 和 flex-shrink 设置为 0)而第二个 child 没有确定的大小，并且会适本地增长和收缩。

但是，当我尝试嵌入两个顶级 div 时，出现了问题。元素(类 labelinput )放入另一个容器(失败的代码笔 here ):

#container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 5px;
  border: 1px solid grey;
}
.labelinput {
  display: flex;
  flex-flow: row;
  margin: 1px;
}
.labelinput > *:first-child {
  flex-basis: 7em;
  flex-grow: 0;
  flex-shrink: 0;
}
.labelinput > *:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
  border: 3px solid purple;
}

<div id='container'>
  <div class='labelinput'>
    <div>1st input</div>
    <div>this is just a div</div>
  </div>
  <div class='labelinput'>
    <div>2nd:</div>
    <input type="text" name="foo" value="this is the input box" />
  </div>

</div>

以上产生了以下不令人满意的输出:

我无法解释为什么会失败，因为我只是将成功案例的内容插入到一个仅执行默认垂直堆叠 (flex-direction: column;) 的容器中。

通过实验我发现删除 align-items来自外层容器 ( #container ) 的属性解决了这个问题，但我也无法解释。

我知道最外面的容器 ( #container ) 被要求布局另外两个容器 (类 labelinput ) 所以无论我为 align-items 设置什么属性最外层容器中的内容应作为一个整体应用于内部容器，而不是更改其内部元素的布局。

此外，我无法解释为什么当我的 CSS 中没有任何内容可以区分元素 div 的元素时，布局会根据元素类型更改。与元素 input 的元素.

Answer 1

I can't explain why this fails as I am just inserting the content of the successful case into a container that simply performs the default vertical stacking (flex-direction: column).

区别在于这个新的主容器有align-items: flex-start .

By experimentation I have discovered that removing the align-items property from the outer level container (#container) fixes the problem but I can't explain that either.

嵌套 .labelinput 时flex 容器在较大的容器 ( #container ) 中，然后是 .labelinput元素成为 flex 元素，除了 flex 容器。

自 #container flex 容器设置为 flex-direction: column ，主轴是垂直的，横轴是水平的¹。

align-items属性仅沿交叉轴起作用。它的默认设置是 align-items: stretch ²，这会导致 flex 元素扩展到容器的整个宽度。

但是当您使用 align-items: flex-start 覆盖默认值时，就像在你的代码中一样，你打包了两个 labelinput元素到容器的开头，如问题图片所示:

因为 stretch是 align-items 的默认值, 当你完全省略这个属性时，你会得到你想要的行为:

I understand that the outermost container (#container) is asked to layout two other containers (of class labelinput) so whatever property I set for align-items in the outermost container should apply to the inner containers as a whole, not change the layout of their internal items.

最外面的容器不会改变内部容器子容器的布局。至少不是直接的。

align-items: flex-start最外层容器的规则直接应用于内部容器。内部容器的内部元素只是响应其父级的大小调整。

这是 align-items: flex-start 的插图影响 .labelinput (添加了红色边框)。

#container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 5px;
  border: 1px solid grey;
}
.labelinput {
  display: flex;
  flex-flow: row;
  margin: 1px;
  border: 2px dashed red;
}
.labelinput > *:first-child {
  flex-basis: 7em;
  flex-grow: 0;
  flex-shrink: 0;
}
.labelinput > *:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
  border: 3px solid purple;
}

<div id='container'>
  <div class='labelinput'>
    <div>1st input</div>
    <div>this is just a div</div>
  </div>
  <div class='labelinput'>
    <div>2nd:</div>
    <input type="text" name="foo" value="this is the input box" />
  </div>
</div>

Moreover I can't explain why the layout is changed based on the element type when there's nothing in my CSS that differentiates between items of element div versus items of element input.

div之间可能没有区别和 input在您的代码中，但存在内在差异。

不同于 div , 一个 input元素有一个由浏览器设置的最小宽度(可能总是允许字符输入)。

您可以减少 input通过应用宽度 min-width: 0或 overflow: hidden ³.

---

脚注

^{1。在此处了解有关 flex 布局的主轴 和交叉轴 的更多信息:In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?}

^{2。了解有关 align-items 的更多信息规范中的属性:8.3. Cross-axis Alignment: the align-items and align-self properties}

^{3。 Why doesn't flex item shrink past content size?}