Оберните несколько маленьких предметов рядом с одним большим предметом

Question

Цель, которую я пытаюсь заархивировать, следующая:

Я хотел бы обернуть несколько предметов вокруг одного большого предмета. Если возможно, я бы хотел не вкладывать элементы в другой блок, потому что тогда я мог бы упустить простую возможность переупорядочить элементы.

Один элемент всегда будет находиться в самой левой / верхней позиции. Этот элемент может динамически меняться с классом item-active. Итак, порядок вещей - это то, что я хотел бы принять во внимание. Это заставило меня выбрать Flexbox. CSS-Grid также может быть попыткой решения, но я немного обеспокоен поддержкой браузера.

Я попытался немного поиграть, но не смог найти удовлетворительное решение:

.flex-container {
  display: flex;
  position: relative;
  align-items: flex-end;
  flex-flow: row wrap;
}

.item {
  box-sizing: border-box;
  border: 1px solid black;
  color: #fff;
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 3rem;  
  
  width: 25%;
}

.item-active { order: 1; position: absolute; top: 0; left: 0; }

.item-1 { background: #3CFF8A }
.item-2 { background: #3CFFC0 }
.item-3 { background: #3CFFF4 }
.item-4 { background: #3CD4FF }
.item-5 { background: #3C9FFF }
.item-6 { background: #3C6EFF }
.item-7 { background: #3C56FF }
.item-8 { background: #583CFF }
.item-9 { background: #8D3CFF }

<div class="flex-container">
  <div class="item item-1">1</div>
  <div class="item item-2 item-active">2<br><br></div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

Я думал, что использование flex-wrap + flex-direction с позиционированным абсолютом может решить эту проблему. К сожалению, нет.

• Чего не хватает, чтобы заархивировать его?
• Возможно ли даже заархивировать его с помощью flexbox?
• Flexbox является одномерным. Мое требование уже считается двухмерным?

Answer 1

Это легко сделать с помощью CSS-сетки, которая более удобна, чем flexbox, поскольку у вас есть двумерная сетка.

.flex-container {
  display: grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(3,50px);
  grid-gap:5px;
  margin:5px;
}

.item {
  box-sizing: border-box;
  border: 1px solid black;
  color: #fff;
  text-align: center;
  font-size: 3rem;  
}

.item-active {
   grid-column:1/span 3;
   grid-row:1/span 3;
}

.item-1 { background: #3CFF8A }
.item-2 { background: #3CFFC0 }
.item-3 { background: #3CFFF4 }
.item-4 { background: #3CD4FF }
.item-5 { background: #3C9FFF }
.item-6 { background: #3C6EFF }
.item-7 { background: #3C56FF }
.item-8 { background: #583CFF }
.item-9 { background: #8D3CFF }

<div class="flex-container">
  <div class="item item-1">1</div>
  <div class="item item-2 item-active">2<br><br></div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

<div class="flex-container">
  <div class="item item-1">1</div>
  <div class="item item-2 ">2<br><br></div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5 item-active">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

<div class="flex-container">
  <div class="item item-1">1</div>
  <div class="item item-2">2<br><br></div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9 item-active">9</div>
</div>

Используя flexbox, это можно сделать с помощью некоторых хаков

.flex-container {
  display: flex;
  flex-wrap:wrap;
}

.item {
  box-sizing: border-box;
  border: 1px solid black;
  color: #fff;
  text-align: center;
  font-size: 3rem;  
  height:50px;
  width:calc(100%/6 - 10px);
  margin:5px;
}

.item-active {
  order:-1;
  width:calc(100%/2 - 10px);
  height:calc(150px + 20px);
  margin-bottom:calc(-100px - 20px);
}

.item-active:nth-child(-n + 4) ~ :nth-child(5),
.item-active:nth-child(-n + 7) ~ :nth-child(8){
  margin-left:calc(100%/2 + 5px)
}

.item:nth-child(4),
.item:nth-child(7){
  margin-left:calc(100%/2 + 5px)
}
.item-active:nth-child(-n + 4) ~ :nth-child(4),
.item-active:nth-child(-n + 7) ~ :nth-child(7){
 margin-left:5px;
}


.item-1 { background: #3CFF8A }
.item-2 { background: #3CFFC0 }
.item-3 { background: #3CFFF4 }
.item-4 { background: #3CD4FF }
.item-5 { background: #3C9FFF;}
.item-6 { background: #3C6EFF }
.item-7 { background: #3C56FF }
.item-8 { background: #583CFF;}
.item-9 { background: #8D3CFF }

<div class="flex-container">
  <div class="item item-1">1</div>
  <div class="item item-2 item-active">2<br><br></div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

<div class="flex-container">
  <div class="item item-1">1</div>
  <div class="item item-2 ">2<br><br></div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5 item-active">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

<div class="flex-container">
  <div class="item item-1">1</div>
  <div class="item item-2">2<br><br></div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9  item-active">9</div>
</div>