Как лучше сделать сетку «в строке либо 1 блок либо 2»?

Question

[Vadim Stepanenko]

привет!
подскажите, как лучше сделать сетку "в строке либо 1 блок либо 2"?

сейчас сделано так: https://codepen.io/tvj/pen/wvdMWvK

загвоздка скорее с отступами у двойных блоков. сделал это так:

.item-single {
  flex-basis: calc(50% - 2px - 5px); // -2px на бордер и -5px на половину маргина одного блока (левого)
}

.item-single:nth-child(odd) {
  margin-right: 10px;
}

но мне кажется что высчитывать так flex-basis не совсем корректно, и для отступов есть более изящное. а главное работающее решение (сейчас просто каждому нечетному item-single добавляется маргин справа, это почему-то работает не во всех случаях)

может есть решение получше?

Comments

[Сергей Сергей]

.item:nth-child(3n-1)
не знаю, что-то не так считает для item-single

[Vadim Stepanenko]

Сергей Сергей, считает почему то не так, да

.item:nth-child(3n-1)

если сделать так, то если двойные блоки идут в первой строке, то отступа не будет :(

[Ankhena]

А просто justify-content: space-between вы по какой причине не можете использовать? И не иметь проблем с этим отступом и nth-child?

Если список поддерживаемых браузеров позволяет, то флекс потихоньку начинает работать с gap https://caniuse.com/?search=gap

И самое чудное решение - это гриды.

Answer 1

[Айрат]

Привет.
Попробуй вот так:

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.item {
  background: red;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  font-size: 30px;
  text-align: center;
  border: 1px solid black;
  box-sizing: borer-box;
}

.item-full {
  flex-basis: 100%;
}

.item-single {
  flex-basis: 49%;
}