带有两个容器的 Flexbox 布局[关闭]

Question

有没有办法用两个容器和flexbox实现以下布局？橙色和红色框是包含项目的弹性盒容器，蓝色和绿色是与之搭配的组标题。我希望两个容器都换行到第二行，然后下一个容器将与前一个容器中的最后一个项目在同一行开始。到目前为止，我在项目换行后得到一个空格，并且下一个容器从下一行开始。

我正在尝试获得这样的布局，不确定是否可以使用 Flexbox。有什么想法吗？

所需布局：

.item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 3.25rem;
  padding-top: 1rem;
  width: 100%;
}

.group-container {}

.main-container {
  display: flex;
  justify-content: space-between;
  row-gap: 1.875rem;
  width: 100%;
  max-width: 220px;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

.item-2 {
  width: 100px;
  height: 100px;
  background-color: orange;
}

.heading {
  height: 20px;
  width: 100%;
  background-color: green;
}

<div class="main-container">
  <div class="group-container">
    <div class="heading"></div>
    <div class="item-container">
      <div class="item"> </div>
      <div class="item"> </div>
      <div class="item"> </div>
    </div>
  </div>
  
  <div class="group-container">
    <div class="heading"></div>
  <div class="item-container">
    <div class="item-2"> </div>
    <div class="item-2"></div>
    <div class="item-2"></div>
  </div>
</div>
</div>

Answer 1

这是一个具有重复模式的示例：

/* flex wrapping container */
.flexPattern {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  padding:1em;
  max-width:370px;
  margin:auto;
}

/* common and basic rules to flex items */
div {
  flex:1;/* expand flex-items */
  border:solid;
  flex-basis:34%;/* it will make 2 items per line (3x34 > 100)*/
  min-height:30px;/* to match your screenshot */
}
/* make a repeating pattern based on  6 items */
div:nth-child(6n + 1),
div:nth-child(6n + 2) {
  flex-basis:100%;
}

/* example repeating pattern based on 9 repeating children for colors and min-height from screenshot */
div:is(
:nth-child(9n - 7),
:nth-child(9n - 4),
:nth-child(9n - 1)
) {
  min-height:120px;
}
/* blue */
div:is(
:nth-child(9n),
:nth-child(9n+1), 
:nth-child(9n-6)
) {  
  background:#DAE8FB;
  border-color:#6C8DBC;
}
/*orange*/
div:is(
:nth-child(9n + 2),
:nth-child(9n + 5)
) {
  background:#FFE6CE;
  border-color:#D89C2C;
}
/*green*/
div:is(
:nth-child(9n + 4),
:nth-child(9n + 7)
) {
  background:#D5E8D5;
  border-color:#81B46C;
}
/*red*/
div:is(
:nth-child(9n + 6),
:nth-child(9n - 1)
) {
  background:#F9CECD;
  border-color:#BA5453;
}

<section class="flexPattern">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>