Flex盒容器

Question

我想创建一个flex容器，它有3个子项。但是，我希望两个子项是列，第三个是在列的下面运行的行（如页脚）。有可能吗？

Answer 1

这可能最好通过使用两个div，一个flex-box和一个不是：见下文：

＆＃13;

＆＃13;

#wrapper {
  display: flex;
  background-color: lightblue;
}
#a {
background-color: lightgreen;
}
#b {
background-color: lightgray;
}
#c {
background-color: lightyellow;
}

＆＃13;

<div id="wrapper">
  <div id="a">This is a</div>
  <div id="b">This is b</div>
</div>
<div id="c">This is c</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以执行THIS

之类的操作

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.col-container {
  display: flex;
  flex-direction: row;
}

.col {
  margin: 10px;
  height: 200px;
  width: 200px;
  background-color: blue;
}

.row {
  height: 100px;
  width: 100%;
  background-color: red;
}

＆＃13;

<div class="container">
  <div class="col-container">
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="row"></div>
</div>

＆＃13;

＆＃13;

＆＃13;