如何使用CSS将元素集带到下一行

Question

我要做什么？

我正在尝试使用CSS将从最后一个元素开始的元素集带入下一行。

example on jsfiddle

html：

<div id="test">
  <button class="t_btn"> btn1 </button>
  <button class="t_btn"> btn2 </button>
  <button class="t_btn"> btn3 </button>
  <button class="t_btn"> btn4 </button>
  <button class="t_btn"> btn5 </button>
</div>

CSS：

#test .t_btn:nth-last-child(-n+3){
    display: block;
}

这就是我想要的：

Answer 1

这是flexbox的想法。诀窍是添加一个隐藏元素，该元素将通过更改顺序来推送您的元素：

#test {
 display:flex;
 flex-wrap:wrap;
}
#test:before {
  content:"";
  width:100%;
  order:1;
}

#test .t_btn:nth-child(n+4){
  order:2;
}

<div id="test">
  <button class="t_btn"> btn1 </button>
  <button class="t_btn"> btn2 </button>
  <button class="t_btn"> btn3 </button>
  <button class="t_btn"> btn4 </button>
  <button class="t_btn"> btn5 </button>
  <button class="t_btn"> btn6 </button>
  <button class="t_btn"> btn7 </button>
  <button class="t_btn"> btn8 </button>
</div>

或者这样：

#test {
 display:flex;
 flex-wrap:wrap;
}
#test:before {
  content:"";
  width:100%;
  order:1;
}

#test .t_btn:nth-last-child(-n+3){
  order:2;
}

<div id="test">
  <button class="t_btn"> btn1 </button>
  <button class="t_btn"> btn2 </button>
  <button class="t_btn"> btn3 </button>
  <button class="t_btn"> btn4 </button>
  <button class="t_btn"> btn5 </button>
  <button class="t_btn"> btn6 </button>
  <button class="t_btn"> btn7 </button>
  <button class="t_btn"> btn8 </button>
</div>