弹性盒容器

【问题标题】：Flex box container弹性盒容器
【发布时间】：2017-04-12 10:08:11
【问题描述】：

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

【问题讨论】：

查看这个 flexbox 指南css-tricks.com/snippets/css/a-guide-to-flexbox
是的。这是可能的。发布您尝试过的代码。

【解决方案1】：

这可能最好通过使用两个 div、一个 flex-box 和一个不使用的 div 来实现：见下文：

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

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

【讨论】：

【解决方案2】：

你可以做类似THIS

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

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

【讨论】：