弹性项目不在列方向弹性盒中换行

Posted

技术标签:

【中文标题】弹性项目不在列方向弹性盒中换行【英文标题】:Flex items not wrapping in column-direction flexbox 【发布时间】:2016-10-22 01:14:10 【问题描述】:

我有一个outerWrapperinnerWrapper 和孩子。 outerWrapper 的高度为300px,为display: flexinnerWrapper 也是display: flex,是flex-direction: column

当我将带有除stretch 之外的任何值的align-items 添加到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 = 高度 + 边框)。

如何使用 JavaScript 将正确的高度设置为 innerWrapper? (我不能设置 height: 100% 因为我无法设置 align-items: 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>

【问题讨论】:

【参考方案1】:

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

只要给孩子——#innerWrapper——等高:height: 100%。现在他们包装了。

然后,如果您希望项目位于容器底部,请在奇数项目上使用 flex 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>

Revised Fiddle

【讨论】:

【参考方案2】:

尝试添加弹性盒容器的height

ul 
    ...
    height: 100%;

【讨论】:

谢谢!这解决了这个问题,但随后产生了一个新问题。如果你尝试东align-items: flex-endcenter,它不会有任何效果。 我不太确定你要实现什么,但这是你需要的 - jsfiddle.net/woba6o5p/1 无需将 div 设置为 flexbox。 不完全...我希望它像问题中发布的第二张图片一样,只是innerWrapper 的结尾应该在outerWrapper 的结尾 您在之前的评论中描述的内容与我认为的问题中的图像不符。你需要蓝色块与绿色容器的底部对齐吗? 这样怎么样? - jsfiddle.net/woba6o5p/2 在ul 标签上设置宽度和高度。【参考方案3】:

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

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 限制为特定的宽度/高度(因此孩子们实际上会按预期包装)。如果您有任何问题,请告诉我!

【讨论】:

谢谢!但我也想要flex-direction: column; 是的,抱歉刚刚注意到。我已经更新了答案,以实际做你想做的事。 ;) 当我尝试flex-end 时,没有任何反应。 (我将不得不做flex-start, center, flex-end

以上是关于弹性项目不在列方向弹性盒中换行的主要内容,如果未能解决你的问题,请参考以下文章

弹性容器中的文本不会在 IE11 中换行

弹性布局

盒子属性

弹性项目可以包装在具有动态高度的容器中吗?

flex 弹性布局整理

弹性盒子flex布局