Как перенести с определённого flex элемента на новую строку?

Question

Как при помощи только CSS сделать 4 и 5 блок с новой строки?

.container {
  padding: 5px;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 300px;
}
.container > div {
  text-align: center;
  border: 1px solid;
  width: 20px;
  height: 20px;
}

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

Answer 1

flex-wrap: wrap; - элементы будут переноситься внутри контейнера.

А это значит нужно что бы первые 3 элемента вытеснили остальные 2.

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

.container > div {
  ...
  width: 65px;
}

.container > div:nth-last-of-type(-n+2) {
  width: 45%;
}

Или так

.container > div {
  ...
  flex:1 25%;
}

.container {
  padding: 5px;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 300px;
  
}
.container > div {
  text-align: center;
  border: 1px solid;
  height: 20px;
  width: 20px;
  
  flex: 1 1 25%;
}

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

Answer 2

.container {
  padding: 5px;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}
.container > div {
  text-align: center;
  border: 1px solid;
  width: 20px;
  height: 20px;
  margin-right: 55px;
}

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

БЛОГ НА HUSL

Как перенести с определённого flex элемента на новую строку?

Ответы (2 шт):