html - 如何使用 flexbox 将中心 div 定位在底部？

Question

我有 3 个 div 容器，并使用 flex css 属性来对齐元素，但在平板纵向模式下，div 2 应该位于 div1 和 div3 之下。

在纵向模式下，div1 和 div3 都应该使用每个父容器的 50% 的大小，div2 应该占据父容器的 100%。

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flexcontainer>div {
  height: 100px;
  width: 100px;
  background-color: #e46119;
  border: 1px solid #626262;
  margin: 3px;
}

<div class="flexcontainer">
  <div class="flex"> 1 </div>
  <div class="flex"> 2 </div>
  <div class="flex"> 3 </div>
</div>

Answer 1

使用 flex 属性调整元素的大小，使用 order 属性调整它们的位置。

.flexcontainer {
  display: flex;
  flex-wrap: wrap;
}

.flexcontainer > div {
  flex: 1 0 45%;
  height: 100px;
  background-color: #e46119;
  border: 1px solid #626262;
  margin: 3px;
}

.flex:nth-child(2) {
  order: 1;
}

<div class="flexcontainer">
  <div class="flex"> 1 </div>
  <div class="flex"> 2 </div>
  <div class="flex"> 3 </div>
</div>