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

I have 3 div containers, and have used the flex css property to align the items, but in the tablet portrait mode, div 2 should come below the div1 and div3.

我有3个div容器，并使用flex css属性来对齐项目，但在平板电脑纵向模式下，div 2应该低于div1和div3。

In portrait mode both the div1 and div3 should use the size of 50% each of parent container and the div2 should occupy the 100% of the parent container.

在纵向模式下，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>

1 个解决方案

#1

Use the flex property to size the items, and the order property to adjust their position.

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