Как флексами разделить блоки 2 на 2?

Question

[Alexander3928]

Как можно разделить элементы флексами, как показано на изображении?



https://codepen.io/Alexxxsander/pen/qBYyXyr

Comments

[Антон Антон]

а вот это так и задумано?

[Антон Антон]

Ну и если это все-таки должно быть одинаковым, то почему не грид 2х2?

Answer 1

[Dino Winchester]

.flex {
   --gap: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
}

.item {
   width: calc(50% - var(--gap) / 2);
   height: 100px;
   background-color: red;
}

Answer 2

[historydev]

.flex {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

Answer 3

[Иван Медведев]

Я бы так написал

Answer 4

[ForSureN1]

.cards {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 20px;
}
.card {
  width: 49%;
}