html - 嵌套的 flexbox 显示不正确

Question

我是 flexbox 初学者。我正在尝试将具有不同参数的 flexbox 实现到一个已经存在的 flexbox 中。 This是我到目前为止得到的。这就是我想要做的:

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads {}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  background-color: green;
}

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>

  <div class="ads">
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
  </div>

  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer 1

您可以在不嵌套 flexboxes 的情况下执行此操作 - 只需调整 ads_element 的 width 和 margin -请参阅下面的演示:

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads_element {
  width: calc(25% - 15px); /* CHANGED */
  height: 100px;
  background-color: transparent !important; /* CHANGED */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <!-- <div class="ads"> -->
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <!-- </div> -->
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

如果您不想更改标记，您也可以将 ads 设为 flexbox - 请参见下面的演示:

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads { /* ADDED */
  display: flex;
  width: 100%;
  background: transparent !important;
  
}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  /* background-color: green; */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="ads">
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
  </div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>