弹性项目不在列方向弹性盒中换行
Posted
技术标签:
【中文标题】弹性项目不在列方向弹性盒中换行【英文标题】:Flex items not wrapping in column-direction flexbox 【发布时间】:2016-10-22 01:14:10 【问题描述】:我有一个outerWrapper
、innerWrapper
和孩子。 outerWrapper
的高度为300px
,为display: flex
。 innerWrapper
也是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-end
或center
,它不会有任何效果。
我不太确定你要实现什么,但这是你需要的 - 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
)以上是关于弹性项目不在列方向弹性盒中换行的主要内容,如果未能解决你的问题,请参考以下文章