如何将我的柔性盒子放在两个柔性盒子下方

Question

我是HTML的新Flex。

所以我的问题是我的flex容器中有三个div。但要求是我希望第三个div低于一个和第二个div。因为我正在使用带有display: flex的flex-container。这三个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-grow，
• flex-shrink
• flex-basis。

别忘了autoprefix。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;