我有一个flexbox布局,其中包含以下元素:
标记:
.wrapper {
display: flex;
flex-direction: column;
height: 10rem;
background: grey;
flex-wrap: wrap-reverse;
}
.row-1--last {
margin-bottom: 100%;
}
<ul class="wrapper">
<li class="row-1">
<a>This is row 1</a>
</li>
<li class="row-1">
<a>This is row 1</a>
</li>
<li class="row-1">
<a>This is row 1</a>
</li>
<li class="row-1 row-1--last">
<a>This is row 1</a>
</li>
<li class="row-2">
<a>This is row 2</a>
</li>
<li class="row-2">
<a>This is row 2</a>
</li>
</ul>
我正在尝试找出一种方法来清除或使row-1的最后一个元素占用该列中的其余空间,以便将类为row-2
的列表项移至新行。
我尝试了不同的操作,例如给最后一个row-1
元素填充或边距。我还尝试添加一个伪元素并使该元素占据其余空间。
未设置li元素的高度。
我不确定它是否可以完全用CSS解决,或者我需要研究JS并计算一些高度。
在此处查看我的codepen:https://codepen.io/fennefoss/pen/PBNMwd
答案 0 :(得分:0)
flex-grow也许可以为您提供帮助:您可以浏览this链接吗?
一种方法可能是将第1行分类的项目包装到div中,该div本身就是flex容器。该容器中的项目(例如具有类row-1-item的项目)可以使用flex-grow属性。
然后可以将第2行的项目放在另一个div中,并确保它们位于不同的行上。
此外,如果您要访问类型的最后一个元素,则可能会有所帮助:
.row-1:nth-last-of-type(1) {
/* add your css */
}