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

Question

我有一个outerWrapper,innerWrapper和儿童.outerWrapper有一个高度300px,是display: flex.innerWrapper也是display: flex,而且是flex-direction: column.

当我添加align-items除了stretchto之外的任何值时outerWrapper,子项将显示一个长列.他们忽略了300px身高.这是一个如何显示的图像:

它应该显示如下:

只是align-items: flex-end.

为什么会发生这种情况,我如何使用align-items: flex-end并让孩子像第二张图像一样显示？

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

更新

在回答这个问题,是添加的高度210px来innerWrapper.但我需要使用JavaScript来获取该数字,因为盒子的数量将是动态的.

我尝试了以下代码:

innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px';

但它没有解决它.它只是将高度设为:5*102(5 =方框数; 102 =高度+边框).

如何设置innerWrapper使用JavaScript 的正确高度？(我不能做高度:100%因为我无法设置对齐项目:flex-end或center.)

的jsfiddle

var innerWrapper = document.getElementById('innerWrapper');
var lastChild = innerWrapper.lastElementChild;
newHight = lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight;
innerWrapper.style.height = newHight + 'px';

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

Answer 1

#outerWrapper您已经定义了:的高度height: 300px。

只要给孩子 - #innerWrapper- 相等的高度：height: 100%。现在他们包起来了。

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

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

#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 */
}

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

修订版小提琴