Как я могу сделать макет flexbox с двумя строками, но с элементами, сгруппированными в два подстолбца?

Question

Трудно объяснить это словами. Я пытаюсь сделать список, который выглядит так, используя flexbox:

ul {
  display:flex;
  width:100%;
}

li {
  list-style:none;
  width: 200px; height: 140px;
  background-color:blue;
  color:#fff;
}
li:nth-child(odd) {
 /*?*/
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Есть идеи?

Answer 1

Вы можете сделать это с помощью order и некоторых nth-child селекторов.

Чтобы выбрать каждые 2 элемента (3-4, 7-8 элементов), вы можете использовать li:nth-child(4n), li:nth-child(4n-1). Например, если n = 1, вы бы выбрали 4*1 и 4*1-1. Итак, 4-й и 3-й элемент. И так далее.

Чтобы выбрать другие элементы (не обязательно в вашем примере, но это полезно знать), вы используете li:nth-child(4n-2),li:nth-child(4n-3)

Затем вы изменяете их порядок внутри гибкого контейнера, устанавливая order:1. По умолчанию было 0. Подробнее здесь -> гибкий порядок

См. Фрагмент ниже

li:nth-child(4n),
li:nth-child(4n-1) {
  background: Red;
  order: 1;
}

li:nth-child(4n-2),
li:nth-child(4n-3) {
  background: blue;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  list-style: none;
  width: calc(25% - 10px);
  height: 140px;
  background-color: blue;
  color: #fff;
  margin: 0 5px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

OBS я использовал width: calc(25% - 10px); на li, потому что 200px x 4 превышал ширину фрагмента SO:)

Answer 2

ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
width: 450px;
}

li {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 34px;
height: 70px;
width: 100px;
margin: 3px;
background: dodgerblue;
border: solid 1px black;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
   
 </ul>