Как зафиксировать элемент в конце первой строки во flex-контейнере

26 августа 2021, 08:20

Мне надо зафиксировать элемент в конце первой строки во flex-контейнере (который имеет flex-wrap: wrap). См. примеры (обратите внимание на кнопку "Expand"):

Я пробовал "закостылять" через 'row-reverse' + 'order: -1', но в этом случае элементы переносятся слева, а не справа.

Вот этот сниппет: https://jsbin.com/divavosafu/1/edit?html,css,output

Ну и обратите внимание, что не влезающие элементы, которые переезжают на следующую строку должны занимать всю ширину. То есть нелья в отдельный контейнер:

Можно ли как-то такое вообще сделать? Может без flex, но с float как-то...

Answer 1

В принципе что-то похожее удалось сделать через float, но смущает несколько моментов:

Придется отказаться от flex модели
Кнопка Expand зафиксирована справа, а надо бы слева (к ближайшей кнопке в первом ряду)

Если кто-то подскажет как решить проблему с кнопкой, буду очень рад.

Код:

.container { 
  display: inline-block; 
  width: 100%; 
} 
 
.right { 
  float: right; 
} 
 
.item { 
  display: inline-flex; 
  padding: 8px; 
  border: 1px solid #CECECE; 
} 
 
.item:not(:last-child) { 
  margin-right: 8px; 
  margin-top: 8px; 
}

  <div class="container"> 
    <div class="right"> 
      <div class="item expand">Expand</div> 
      <div class="item ">Right 1</div> 
      <div class="item ">Right 2</div> 
    </div> 
     
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
    <div class="item">7</div> 
    <div class="item">8</div> 
  </div>