如何使用 flexbox 将中心 div 定位在底部？答案

【问题标题】：How to position the center div at the bottom using flexbox?如何使用 flexbox 将中心 div 定位在底部？
【发布时间】：2017-03-09 10:29:35
【问题描述】：

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

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：