不在列方向flexbox中包装的Flex项目 [英] Flex items not wrapping in column-direction flexbox

问题描述

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

当我添加 align-items 时，除了 stretch 到 outerWrapper ，子项显示一个长列。它们忽略 300px 高度。以下是显示方式的图片：

应显示如下：

< img src =https://i.stack.imgur.com/osL0x.pngalt =enter image description here>

只要 align-items：flex-end 。

为什么会发生这种情况，如何使用 align-items：flex-end 并让子项显示为第二张图片？

JSFiddle

  #outerWrapper {height：300px;背景颜色：lightgreen;显示：flex; flex-wrap：wrap; justify-content：center; align-items：flex-end;} ul {padding：0; margin：0;显示：flex; align-items：center; flex-wrap：wrap; flex-direction：column;} li {list-style-type：none; width：100px; height：100px;背景颜色：lightblue; border：1px solid;}  

 < div id = outerWrapper> < ul id =innerWrapper> < li class =child>我是＃01< / li> < li class =child>我是＃02< / li> < li class =child>我是＃03< / li> < li class =child>我是＃04< / li> < li class =child>我是＃05< / li> < / ul>< / div>  

更新

此问题的答案是将 210px 的高度添加到 innerWrapper 。但我需要使用JavaScript来获取这个数字，因为框的数量是动态的。

我尝试下面的代码：

  innerWrapper.style.height =（lastChild.offsetTop  -  innerWrapper.offsetTop + lastChild.offsetHeight）+'px'; 
  

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

如何设置正确的高度到 innerWrapper 使用JavaScript？ （我不能做height：100％，因为我不能设置align-items：flex-end或center。）

JSFiddle

  #outerWrapper {height：300px;背景颜色：lightgreen;显示：flex; flex-wrap：wrap; justify-content：center; align-items：flex-end;} ul {padding：0; margin：0;显示：flex; alignment-items：center; flex-wrap：wrap; flex-direction：column; / * height：206px; * /} li {list-style-type：none; width：100px; height：100px;背景颜色：lightblue; border：1px solid;}  

 < div id = outerWrapper> < ul id =innerWrapper> < li class =child>我是＃01< / li> < li class =child>我是＃02< / li> < li class =child>我是＃03< / li> < li class =child>我是＃04< / li> < li class =child>我是＃05< / li> < / ul>< / div>  

解决方案

您已为 #outerWrapper ： height：300px 定义了高度。

只给孩子– #innerWrapper –等于height： height：100％。现在他们换行了。

然后，如果你想要的项目定位在容器底部，使用flex auto

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

#outerWrapper {height：300px;背景颜色：lightgreen;显示：flex; flex-wrap：wrap; justify-content：center; align-items：flex-end;} ul {padding：0; margin：0;显示：flex; align-items：center; flex-wrap：wrap; flex-direction：column;高度：100％; / * NEW * /} li {list-style-type：none; width：100px; height：100px;背景颜色：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>我是＃01< / li> < li class =child>我是＃02< / li> < li class =child>我是＃03< / li> < li class =child>我是＃04< / li> < li class =child>我是＃05< / li> < / ul>< / div>  

修订的小提琴

I have an outerWrapper, innerWrapper, and children. outerWrapper has a height of 300px, and is display: flex. innerWrapper is also display: flex, and is flex-direction: column.

When I add align-items with a value of anything but stretch to outerWrapper, the children display one long column. They ignore the 300px height. Here's an image of how it displays:

It should display like this:

Just with align-items: flex-end.

Why is this happening, and how can I use align-items: flex-end and have the children display like the second image?

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>

Update

The answer to this question, is to add a height of 210px to innerWrapper. But I need to get to that number using JavaScript, because the amount of boxes will be dynamic.

I tried the following code:

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

but it didn't fix it. It just made the height to: 5 * 102 (5 = number of boxes; 102 = height + border).

How can I set the correct height to innerWrapper using JavaScript? (I can't do height: 100% because I won't be able to set align-items: flex-end or 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>

解决方案

You've defined a height for #outerWrapper: height: 300px.

Just give the child – #innerWrapper – an equal height: height: 100%. Now they wrap.

Then, if you want the items positioned at the container bottom, use flex auto margins on the odd-numbered items.

Use an invisible pseudo-element to make the last odd-numbered item always align with the top row.

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

Revised Fiddle

这篇关于不在列方向flexbox中包装的Flex项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！