Как мне сделать так, чтобы гибкие элементы занимали эти места?

Question

У меня есть простая структура, подобная этой ...

<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 

Я разработал ее так, чтобы первая коробка имела площадь, в два раза превышающую площадь остальных.Когда я пытаюсь согнуть элементы, поле 4 и 5 переходит под поле 1 вместо поля 2 и 3. Вот изображение , что я хочу и , что происходит .Надеюсь, я объяснил это достаточно хорошо.

вот быстрый jsfiddle - https://jsfiddle.net/9h7mjenq/4/

Извините, если это что-то базовое, что я должен знать, я попытался найти его, но мой поиск не включенуказать в последнее время.

Answer 1

Вы можете расположить эти элементы в аналогично с помощью flexbox, но порядок будет немного другим.Хитрость заключается в том, чтобы использовать flex-direction: столбец и фиксировать высоту контейнера, чтобы обернуть следующие элементы li в новые столбцы.

Вот ваша скрипка, слегка измененная:

body {
  background: #000;
}

#container {
  width: 500px;
  height: 250px;
  background: #fff;
  flex-flow: column wrap;
  display: flex;
}

li {
  width: 115px;
  height: 115px;
  margin: 5px;
  background: #0000ff;
}

li:nth-of-type(1) {
  width: 235px;
  height: 235px;
}

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