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