Flexbox, из четырех блоков вряд опустить третий блок под второй

Question

Сейчас есть четыре div стоящих в ряд, сверстано через Flexbox. Можно ли не изменяя HTML, именно не отказываясь от Flexbox разместить третий div под вторым (что бы внешне получилось что то типа буквы "Т"?

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

.main div {
  width: 20px;
  background: #6aa5ea;
  text-align: center;
  padding: 10px;
  border: 5px solid #3de278;
}

<div class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 1

Если все же есть возможность рассмотреть вариант с grid, то как-то так.

.main {
  display: grid;
  grid-template: "1fr 1fr 1fr";
  justify-content: space-between;
}

.main div {
  width: 20px;
  background: #6aa5ea;
  text-align: center;
  padding: 10px;
  border: 5px solid #3de278;
}

.main div:nth-child(3)
{
  grid-row: 2;
  grid-column: 2;
}

<div class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 2

как вариант можно через calc рассчитывать маргины по бокам (в примере не стала так как 100vw - будут огромные), например margin: 0 calc(100vw * -36/1440)

.main {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
max-width: 383px;
}

.main div {
  width: 20px;
  background: #6aa5ea;
  text-align: center;
  padding: 10px;
  border: 5px solid #3de278;
  margin: 0 36px 10px;
}

<div class="main">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

БЛОГ НА HUSL

Flexbox, из четырех блоков вряд опустить третий блок под второй

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