html - 如何将我的 flex 盒子放在两个 flex 盒子下面

Question

我是 HTML 中的新 Flex。

所以我的问题是我的 flex-container 中有三个 div。但要求是我希望第三个 div 低于第一个和第二个 div。因为我使用 flex-container 和 display: flex。这三个 div 本身被放置在同一行中。

谁能帮帮我。

.flex-container-site-footer {
  display: flex;
}

.box {
  height: 100px;
  min-width: 100px;
}

.One {
  background-color: blue;
  flex-grow: 12;
}

.two {
  background-color: yellow;
  flex-grow: 12;
}

.three {
  background-color: black;
  flex-grow: 0
}

<div class="flex-container-site-footer">
  <div class="box One">
    <p>Box 1</p>
  </div>
  <div class="box two">
    <p>Box 2</p>
  </div>
  <div class="box three">
    <p>Box 3</p>
  </div>
</div>

DEMO HERE

Answer 1

这样就可以了。 flex 简写用于(按顺序):

• flex 增长,
• flex 收缩
• flex 基础。

别忘了 autoprefix .

.flex-container-site-footer{
  display:flex;
  flex-wrap: wrap;
}
.flex-container-site-footer > * {
  flex: 0 0 50%;
  max-width: 50%;
}

.box{
  height:100px;
}
.One{
  background-color: blue;
}

.two{
  background-color: yellow;
}

.three{
  background-color: black;
  flex-basis: 100%;
  max-width: none;
}

<div class="flex-container-site-footer">
    <div class="box One">
        <p>Box 1</p>
    </div>
    <div class="box two">
        <p>Box 2</p>
    </div>
    <div class="box three">
        <p>Box 3</p>
    </div>
</div>