清除flexbox列

时间:2018-07-17 11:22:34

标签: javascript html css flexbox

我有一个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

1 个答案:

答案 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 */
}