Flex项目不包含在列方向的flexbox中

Question

我有outerWrapper，innerWrapper和孩子。 outerWrapper的高度为300px，且为display: flex。 innerWrapper也是display: flex，并且是flex-direction: column。

当我将align-items的值除stretch outerWrapper添加到300px时，子项会显示一个长列。他们忽略align-items: flex-end身高。这是一个如何显示的图像：

它应该显示如下：

只需align-items: flex-end。

为什么会发生这种情况，如何使用#outerWrapper { height: 300px; background-color: lightgreen; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; } ul { padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; } li { list-style-type: none; width: 100px; height: 100px; background-color: lightblue; border: 1px solid; }并让子项显示为第二张图像？

JSFiddle

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="child">I'm #01</li>
    <li class="child">I'm #02</li>
    <li class="child">I'm #03</li>
    <li class="child">I'm #04</li>
    <li class="child">I'm #05</li>
  </ul>
</div>

210px

更新

此问题的答案是将innerWrapper的高度添加到innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px'; 。但我需要使用JavaScript来获取该数字，因为盒子的数量将是动态的。

我尝试了以下代码：

innerWrapper

但它没有解决它。它的高度只有：5 * 102（5 =方框数; 102 =高度+边框）。

如何使用JavaScript将正确的高度设置为var innerWrapper = document.getElementById('innerWrapper'); var lastChild = innerWrapper.lastElementChild; newHight = lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight; innerWrapper.style.height = newHight + 'px';？ （我不能做高度：100％因为我无法设置对齐项目：flex-end或center。）

JSFiddle

#outerWrapper {
  height: 300px;
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  /*height: 206px;*/
}
li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="child">I'm #01</li>
    <li class="child">I'm #02</li>
    <li class="child">I'm #03</li>
    <li class="child">I'm #04</li>
    <li class="child">I'm #05</li>
  </ul>
</div>

{{1}}

Answer 1

尝试添加flexbox容器的height：

ul {
    ...
    height: 100%;
}

Answer 2

由于outerWrapper和菜单元素都有flex定位，因此您必须对菜单元素进行一些调整＆＃39;尺寸和对齐方式。这是您正在寻找/匹配第二张图片的行为的更新小提琴：

https://jsfiddle.net/wtyqo1su/1/

#outerWrapper {
  width: 100%;
  height: 300px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  height: 250px;
  width: 300px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

我将ul限制为特定的宽度/高度（因此孩子们会按预期实际换行）。如果您有任何问题，请告诉我们！

Answer 3

您已为#outerWrapper height: 300px定义了一个高度。

让孩子 - #innerWrapper - 身高相等：height: 100%。现在他们换行。

然后，如果您希望项目位于容器底部，请在奇数项上使用flex auto边距。

使用不可见的伪元素使最后一个奇数项始终与顶行对齐。

＆＃13;

＆＃13;

#outerWrapper {
    height: 300px;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;                           /* NEW */
}

li {
    list-style-type: none;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid;
}

li:nth-child(odd) { margin-top: auto; }      /* NEW */

ul::after {
    content: "";                              /* NEW */
    width: 100px;                             /* NEW */
    height: 100px;                            /* NEW */
    border: 1px solid;                        /* NEW */
    visibility: hidden;                       /* NEW */
}

＆＃13;

<div id="outerWrapper">
    <ul id="innerWrapper">
        <li class="child">I'm #01</li>
        <li class="child">I'm #02</li>
        <li class="child">I'm #03</li>
        <li class="child">I'm #04</li>
        <li class="child">I'm #05</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Revised Fiddle