如何将Flexbox放入另一个？

Question

我正在学习HTML5/CSS3一周,现在我正在研究flexbox.我只是有一个问题,我想用它们制作一个块"块",其中包含两个垂直方向的盒子和另一个块"block2",其中包含两个水平方框.

因此,我希望bblock中的block和block2以水平方式彼此相邻,并且块的两个部分在垂直方向上,而block2的两个部分以水平方式.

但它不起作用.

我该怎么办 ？先感谢您 !

.bblock {
  border: 2px solid #444;
  display: flex;
}
.block {
  border: 2px solid #444;
  max-width: 542px;
  /*margin: 0 auto;*/
}
.section:nth-child(1) background-color:orange;
 width:500px;
 max-height:250px;
 border:1px solid black;
 text-align:justify;
 padding-top:0px;
 padding-right:20px;
 padding-left:20px;
 padding-bottom:0px;
 border-radius:10px;

}
.section:nth-child(2) {
  background-color: yellow;
  width: 500px;
  max-height: 170px;
  border: 1px solid black;
  text-align: justify;
  padding-top: 0px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0px;
  border-radius: 10px;
}
.block2 {
  border: 2px solid #444;
  max-width: 542px;
  margin-bottom: 10px;
  /*margin: 0 auto;*/
}
.section2:nth-child(1) {
  background-color: orange;
  width: 500px;
  max-height: 500px;
  border: 1px solid black;
  text-align: justify;
  padding-top: 0px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0px;
  border-radius: 10px;
}
.section2:nth-child(2) {
  background-color: yellow;
  width: 500px;
  max-height: 170px;
  border: 1px solid black;
  text-align: justify;
  padding-top: 0px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0px;
  border-radius: 10px;
}

<div id="bblock">

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

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

  <div class="block2">
    <div class="section2">
    </div>

    <div class="section2">
    </div>
  </div>

</div>

Answer 1

这是你的HTML结构:

<div id="bblock">
    <div class="block">
        <div class="section"></div>
        <div class="section"></div>
    </div>
    <div class="block2">
         <div class="section2"></div>
         <div class="section2"></div>
    </div>
</div>

如果需要.block并.block2水平对齐,请将parent(.bblock)设为flex容器:

#bblock {
  display: flex;
  /* flex-direction: row;  (this is the default value; it can be omitted) */
  height: 200px;
  border: 1px dashed black;
}
.block {
  flex: 1;
  background-color: orangered;
}
.block2 {
  flex: 1;
  background-color: lightgreen;
}

<div id="bblock">
  <div class="block">
    <div class="section"></div>
    <div class="section"></div>
  </div>
  <div class="block2">
    <div class="section2"></div>
    <div class="section2"></div>
  </div>
</div>

如果您想要.block并.block2垂直对齐,请将父级设为Flex容器flex-direction: column:

#bblock {
  display: flex;
  flex-direction: column;
  height: 200px;
  border: 1px dashed black;
}
.block {
  flex: 1;
  background-color: orangered;
}
.block2 {
  flex: 1;
  background-color: lightgreen;
}

<div id="bblock">
  <div class="block">
    <div class="section"></div>
    <div class="section"></div>
  </div>
  <div class="block2">
    <div class="section2"></div>
    <div class="section2"></div>
  </div>
</div>

或者,保留父项flex-direction: row并添加flex-wrap: wrap.然后,使每个弹性项目占用宽度的100%,这会强制每行只有一个项目.

#bblock {
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  border: 1px dashed black;
}
.block {
  flex-basis: 100%;
  background-color: orangered;
}
.block2 {
  flex-basis: 100%;
  background-color: lightgreen;
}

<div id="bblock">
  <div class="block">
    <div class="section"></div>
    <div class="section"></div>
  </div>
  <div class="block2">
    <div class="section2"></div>
    <div class="section2"></div>
  </div>
</div>

如果您希望.block垂直堆叠的子项和.block2水平排列的子项,请使用嵌套的Flex容器并flex-direction根据需要进行调整.

#bblock {
  display: flex;
  height: 200px;
  border: 1px dashed black;
}
.block {
  flex: 1;
  background-color: orangered;
  display: flex;
  flex-direction: column;
}
.block > div {
  flex: 1;
  border: 1px solid yellow;
}
.block2 {
  flex: 1;
  background-color: lightgreen;
  display: flex;
}
.block2 > div {
  flex: 1;
  border: 1px solid blue;
}

<div id="bblock">
  <div class="block">
    <div class="section">block section 1</div>
    <div class="section">block section 2</div>
  </div>
  <div class="block2">
    <div class="section2">block2 section 1</div>
    <div class="section2">block2 section 2</div>
  </div>
</div>