Question

我学习HTML5 / CSS3一周，现在我正在使用flexbox。我只是有一个问题，我想用它们做一个块＆＃34;阻止＆＃34;其中包含两个垂直方向的方框和另一个方框＆＃34; block2＆＃34;它包含两个水平方框。

所以我希望block和block2在bblock中以水平方式彼此相邻，并且block的两个部分在垂直方向，而block2的两个部分以水平方式。

但它不起作用。

我该怎么办？先感谢您！

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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水平对齐，请将父（.bblock）设为灵活容器：

#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-direction: column的Flex容器：

#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>

如何将Flexbox放入另一个？

1 个答案: