Как разместить блоки 2х2 при помощи flex

Question

Подскажите как можно разместить блоки такой вот "плиткой" пи помощи flex

Answer 1

Я надеюсь, что конкретно для твоей задачи это подойдёт...

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 49%; //тут +- в зависимости какой размер тебе нужен
}

<div class="container">
  <div class="item">qwe</div>
  <div class="item">qwe</div>
  <div class="item">qwe</div>
  <div class="item">qwe</div>
</div>

Answer 2

Попробуйте так, хотя это не идеальный вариант.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.box {
  width: 100%;
  min-width: 100%;
  display: flex;
  justify-content: center;
}

.items-block {
  display: flex;
  width: 200px;
  height: 200px;
  margin: 10px;
  max-width: 40%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.item-d {
  width: 100%;
  height: 190px;
  background: deepskyblue;
}

<section class="container">
   <section class="box">
    <div class="items-block">
      <div class="item-d"></div>
      <p class="item-p">Lorem</p>
    </div>
    <div class="items-block">
      <div class="item-d"></div>
      <p class="item-p">Ipsum</p>
    </div>
   </section>
   <section class="box">
    <div class="items-block">
      <div class="item-d"></div>
      <p class="item-p">Dolor</p>
    </div>
    <div class="items-block">
      <div class="item-d"></div>
      <p class="item-p">Sit</p>
    </div>
   </section>
</section>

БЛОГ НА HUSL

Как разместить блоки 2х2 при помощи flex

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