html - 将多个小元素包裹在一件大元素旁边

Question

我试图存档的目标如下:

我想将多个元素包裹在一件大元素上。如果可能的话，我想避免将元素嵌套到另一个 div 中，因为那样我可能会失去重新排序元素的简单机会。

一个元素将始终位于最左侧/顶部位置。该元素可能会通过 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>