Последний элемент flex-box

102

14 апреля 2022, 10:30

Можно ли с помощью flex-box сделать так, что бы последний элемент был в конце а все предыдущие с левой стороны?

Answer 1

Для отбивки последнего блока задайте ему свойство margin-left: auto;:

.flex {
  display: flex;
  margin: 6px; padding: 3px;
  background-color: #bcbec0;
}
.flex > div {
  height: 60px;
  width: 60px;
  margin: 3px;
  font: 36px/60px Arial;
  text-align: center;
  background-color: #be1e2d;
  color: white;
}
.flex > div:last-of-type {
  margin-left: auto;
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Также это сработает для нескольких блоков. В этом случае, нужно добавить margin-left: auto; блоку, с которого нужна отбивка:

.flex {
  display: flex;
  margin: 6px; padding: 3px;
  background-color: #bcbec0;
}
.flex > div {
  height: 60px;
  width: 60px;
  margin: 3px;
  font: 36px/60px Arial;
  text-align: center;
  background-color: #be1e2d;
  color: white;
}
.flex > div:nth-of-type(3) {
  margin-left: auto;
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 2

В качестве альтернативного решения, можно использовать вариант с пустым блоком и свойством flex-grow.

.container {
  display: flex;
  
  background-color: darkblue;
}
.box {
  width: 60px;
  height: 60px;
  
  background-color: tomato;
  margin: 10px;
}
.spacer-box {
  flex-grow: 1;
}
.last-box {
  background-color: yellow;
}

<div class='container'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  
  <div class='spacer-box'></div>
  <div class='box last-box'></div>
</div>

Answer 3

Поставьте margin-left: auto для последнего элемента.

.container {
  display: flex;
  
  background-color: darkblue;
}
.box {
  width: 60px;
  height: 60px;
  
  background-color: tomato;
  margin: 10px;
}
.last-box {
  margin-left: auto;
}

<div class='container'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='last-box box'></div>
</div>