Как расположить блоки таким образом с помощью flex?

Question

Подскажите, пожалуйста, как можно организовать блоки таким образом:

Возможно ли это сделать флексами?

Мои неудачные наработки с использованием flex-direction:

* {
  margin: 0; 
  padding: 0;
}

.column {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  background: red;
  display: flex;
  flex-direction: column;
}

.column-item {
  width: 100px;
  height: 100px;
  background: #3399FF;
}

<div class="column">
  <div class="column-item">
    <p>блок 1</p>
  </div>
  <div class="column-item">
    <p>блок 2</p>
  </div>
  <div class="column-item">
    <p>блок 3</p>
  </div>
  <div class="column-item">
    <p>блок 4</p>
  </div>
  <button>Нажать!</button>
</div>

Answer 1

* {
  margin: 0;
  padding: 0;
}

.column {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.column-item {
  width: 100px;
  height: 100px;
  background: #3399FF;
}

.column-item__wrap {
  display: flex;
  justify-content: space-between;
}

button {
  width: 100%;
}

<div class="column">
  <div class="column-item__wrap">
    <div class="column-item">
      <p>блок 1</p>
    </div>
    <div class="column-item">
      <p>блок 2</p>
    </div>
  </div>
  <div class="column-item__wrap">
    <div class="column-item">
      <p>блок 3</p>
    </div>
    <div class="column-item">
      <p>блок 4</p>
    </div>
  </div>
  <div>
    <button>Нажать!</button>
  </div>
</div>

БЛОГ НА HUSL

Как расположить блоки таким образом с помощью flex?

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