嵌套的'对齐内容：空间'不起作用

Question

我有2个父容器，其中包含2个子容器。 （总共有4个容器。）所有包装的包装器和2个父容器所在的包装器设置为以下css样式：

display: flex;
flex-wrap: wrap;
justify-content: space-around;

问题
2个父容器所在的包装器似乎没有注册justify-content: space-around;

尝试完成
我希望所有容器都有justify-content: space-around;。除此之外，我希望2个子容器具有justify-content: space-around;。像这样：

我仍然希望在页面大小调整时调整“更少的空间”。所以我不能只为它增加一个余量。

JSFiddle

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.outerWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.heading {
  font-size: 20px;
}

<div id="container">
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: orange;">
      <li class="heading">FIRST</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: lightblue;">
      <li class="heading">Second</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: pink;">
      <li class="heading">Third</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: burlywood;">
      <li class="heading">Fourth</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
</div>

Answer 1

主容器中的弹性项默认使用内容宽度。这意味着项目的子项（第一，第二等）被打包在一起，justify-content:space-around没有空间可以工作。

主要容器（#container）：红色边框//弹性项目（.outerWrapper）：黑色边框

将flex: 1添加到.outerWrapper：

现在，这两个项目占据#container的完整可用宽度，而justify-content: space-around可以使用空间。

#container {
  display: flex;
  flex-wrap: wrap;
  border: 2px dashed red;
  justify-content: space-around;
}
.outerWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 2px dashed black;
  flex: 1;
}
.heading {
  font-size: 20px;
}

<div id="container">
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: orange;">
      <li class="heading">FIRST</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: lightblue;">
      <li class="heading">Second</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: pink;">
      <li class="heading">Third</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: burlywood;">
      <li class="heading">Fourth</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
</div>

revised fiddle

要在前两个项目和最后两个项目之间创建额外的空间（如问题中的图像），一种方法会在它们之间引入第三个弹性项目。

然后，您可以使用flex属性控制每个项目的宽度。

.outerWrapper:nth-child(1) { flex: 2; }
.outerWrapper:nth-child(2) { flex: 1; }
.outerWrapper:nth-child(3) { flex: 2; }

当盒子开始包裹在较小的屏幕上时，您需要移除此间隔物品。这是一种方法：

@media ( max-width: 450px ) {
  .outerWrapper:nth-child(2) { display: none; }  
}

revised fiddle

Answer 2

您只需为子元素（shouldShowMenu）添加最小宽度，并尝试向.outerWrapper添加边距以便在响应中工作。

ul

#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.outerWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
      min-width:35%;
}
.outerWrapper ul:first-child {
  margin-right: 25px;
}
.heading {
    font-size: 20px;
}

Answer 3

只需将margin-right样式添加到ul:first-child

即可

＆＃13;

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.outerWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.outerWrapper ul:first-child {
  margin-right: 25px;
}
.heading {
  font-size: 20px;
}

＆＃13;

<div id="container">
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: orange;">
      <li class="heading">FIRST</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: lightblue;">
      <li class="heading">Second</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
  <div class="outerWrapper">
    <ul class="wrapper" style="background-color: pink;">
      <li class="heading">Third</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
    <ul class="wrapper" style="background-color: burlywood;">
      <li class="heading">Fourth</li>
      <li class="list">Item #01</li>
      <li class="list">Item #02</li>
      <li class="list">Item #03</li>
      <li class="list">Item #04</li>
      <li class="list">Item #05</li>
      <li class="list">Item #06</li>
      <li class="list">Item #07</li>
      <li class="list">Item #08</li>
      <li class="list">Item #09</li>
      <li class="list">Item #10</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;