Как перенести набор элементов в следующую строку с помощью css - PullRequest
Новая
       8

Как перенести набор элементов в следующую строку с помощью css

0 голосов
/ 05 сентября 2018

Что я пытаюсь сделать?

Я пытаюсь перенести набор элементов, начиная с последнего элемента, на следующую строку, используя CSS.

пример на 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;
}

Это то, что я хочу:

target

1 Ответ

0 голосов
/ 05 сентября 2018

Вот идея с 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>
...