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>

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

1 个答案: