嵌套的 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

你需要设置ads的宽度和高度，否则这个标签和它里面的所有东西都会默认为0宽度和0高度

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

将其添加到您的代码中以查看结果

Answer 2

我填写了ads类的css属性

.ads
{
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
}

在这里检查工作小提琴https://jsfiddle.net/L5egv0ah/1/

Answer 3

使用 display:flex 和 width:100% 和 background-color 覆盖更改 .ads 和 .ads_element 下面的 css

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;
}
.container > div:nth-child(odd).ads
{
    width: 100%;
    display: flex;
    background-color: transparent;
}
.ads_element
{
	width: calc(25% - 5px);
	height: 200px;
	border:3px solid red;
  background-color: transparent;
  margin: 0px 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>

Answer 4

您可以在不嵌套弹性框的情况下执行此操作 - 只需调整 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 设置为弹性框 - 请参阅下面的演示：

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>

Answer 5

这就是你想要做的：

HTML

<div class="container">
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </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_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

CSS

html, body 
{
  background-color: #ffeead;
  margin: 10px;
}
.container > .element_row > div:nth-child(even) 
{
  background-color: red;
}

.container > .element_row > div:nth-child(odd) 
{
  background-color: blue;
}
.container
{
    max-width: 500px;
    margin: auto;
    border: 5px solid #ffcc5c;
    display: flex;
  flex-flow: column;
}
.element_row{
  display:flex;
  flex-flow:row;
  justify-content: space-between;
}
.element
{
    width: 49%;
    box-sizing: border-box;
    border: 1px solid #edeeee;
    margin: 5px 0px;
    height: 200px;
    box-shadow: 0 0 5px 0 #edeeee;
    border-radius: 5px 5px 5px 5px;
}
.ads
{
    display: flex;
  flex-flow:row;
  justify-content: space-evenly;
}
.ads_element
{
  width: 22%;
    height: 200px;
    border: 3px solid red;
}