Html 放置在其他容器内时，对齐会中断

我正在探索Flexbox并尝试对齐一些项目。以下代码起作用并显示了我想要实现的目标（成功的代码笔）：

.labelinput{
显示器：flex；
柔性流：行；
保证金：1px；
}
.labelinput>*：第一个孩子{
弹性基础：10em；
flex-grow:0；
弹性收缩：0；
}
.labelinput>*：第n个子项（2）{
柔性生长：1；
弹性收缩：1；
边框：3件纯色紫色；
}

第一输入
这只是一个div
第二：

我无法解释为什么失败，因为我只是将成功案例的内容插入到一个只执行默认垂直堆叠的容器中（

flex-direction:column

）

不同之处在于，这个新的主容器具有

align items:flex start

通过实验，我发现从外部级别容器（

#container

）中删除

align items

属性可以解决问题，但我也无法解释这一点

当您将

.labelinput

柔性容器嵌套在较大的容器（

#container

）中时，

.labelinput

元素将成为柔性容器之外的柔性项

由于

#容器

flex容器设置为

flex direction:column

，因此主轴垂直，横轴水平1

align items

属性仅沿横轴工作。它的默认设置是

align items:stretch

2，这会导致flex items扩展容器的整个宽度

但是，当您使用

align items:flex start

覆盖默认值时，就像在代码中一样，您将两个

labelinput

项打包到容器的开头，如问题图像所示：

由于

stretch

是

align items

的默认值，因此当您完全忽略此属性时，您将获得所需的行为：

我知道最外层的容器（

#container

）被要求布局另外两个容器（属于

labelinput

）类，因此我为最外层容器中的

对齐项

设置的任何属性都应作为一个整体应用于内部容器，而不是更改其内部项的布局

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

最外层容器上的

align items:flex start

规则直接应用于内部容器。内部容器的内部项仅响应其父容器的大小调整

下面是

align items:flex start

影响

.labelinput

（添加了红色边框）的图示

#容器{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
保证金：5px；
边框：1px纯灰；
}
.拉伯林普特{
显示器：flex；
柔性流：行；
保证金：1px；
边框：2个红色虚线；
}
.labelinput>*：第一个孩子{
弹性基础：7em；
flex-grow:0；
弹性收缩：0；
}
.labelinput>*：第n个子项（2）{
柔性生长：1；
弹性收缩：1；
边框：3件纯色紫色；
}

第一输入
这只是一个div
第二：

我有点明白你的观点，但根据这一基本原理，鉴于

对齐项目

用于横轴，而

对齐内容

用于主轴，我应该能够通过在

.labelinput

容器中设置

对齐内容：flex start

获得相同的堆叠效果。但是我没有。

justify content:flex start

在您的

labelinput

容器中不起作用，因为您也在第n（2）个子容器上设置了

flex grow:1

。这会告诉这些项目消耗所有可用空间。因此，

justify content

没有可用空间。请参见@MarcusJuniusBrutus，了解它们呈现不同的原因，这是因为

输入的
预期为一行高，并且总是尝试显示尽可能宽的值。有点像设置
display:inline table
到您的
div
元素。如果要防止所述
输入溢出，可以使用
最小宽度：0。Michael_B当然更了解替换元素中的这种行为。值得注意的是，它们的边缘呈现完全不同。