Question

我正在探索Flexbox，并试图调整一些项目。以下代码有效并显示了我想要实现的目标（成功编写代码here）：

＆＃13;

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

＆＃13;

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

＆＃13;

以上代码生成如下所示的良好对齐输出：

我对上述代码的解读是因为每个div中的第一个孩子都有一个确定的大小（10em）并且完全不灵活（flex-grow和{{1}设置为0）而第二个孩子没有确定的大小，并且会适当地增长和缩小。

当我尝试将两个顶级flex-shrink元素（类div）嵌入另一个容器（失败的codepen here）时，会发生什么中断：

＆＃13;

labelinput

＆＃13;

#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;
}

＆＃13;

以上产生以下不满意的输出：

我无法解释为什么会失败，因为我只是将成功案例的内容插入到一个只执行默认垂直堆叠（<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设置的属性应该适用于内部容器作为一个整体，不会改变其内部项目的布局。

此外，我无法解释为什么在我的CSS中没有区分元素align-items的项目与元素{{1}的项目时，基于元素类型更改布局的原因}。

Answer 1

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

不同之处在于这个新的主容器有align-items: flex-start。

通过实验，我发现从外层容器（align-items）中删除#container属性可以解决问题，但我也无法解释。

当您将.labelinput flex容器嵌套在较大的容器（#container）中时，除了flex容器之外，.labelinput元素将成为flex项。

由于#container弹性容器设置为flex-direction: column，主轴是垂直的，十字轴是水平的¹

align-items属性仅适用于横轴。它的默认设置为align-items: stretch ²，这会导致弹性项目扩展容器的整个宽度。

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

由于stretch是align-items的默认值，因此当您完全省略此属性时，您将获得所需的行为：

我理解最外面的容器（#container）被要求布局另外两个容器（类labelinput），所以我在最外层容器中为align-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>

此外，当我的CSS中没有任何内容区分元素div的项目与元素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?}

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

1 个答案:

脚注