在右下角對齊div div

Question

我如何對齊底部的多個div，一個在另一個上。就像下面的圖片一樣。

Answer 1

您可以使用Flexbox做到這一點

1. 設置flex-direction: column到位置的div在另一個
2. align-items: flex-end頂一個的div移動到父
的右側
3. justify-content: flex-end移動divs到父母的底部。

.parent { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
    justify-content: flex-end; 
 

 
} 
 
.box { 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
}

<div class="parent"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

更新：要反轉的div的順序，你可以使用flex-direction: column-reverse和justify-content: flex-start

.parent { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    align-items: flex-end; 
 
    justify-content: flex-start; 
 

 
} 
 
.box { 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
}

<div class="parent"> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    <div class="box">3</div> 
 
</div>

Answer 2

您可以使用Flexbox的使用Flex - 方向：column-reverse;和flex-wrap: wrap-reverse;：

.x { 
 
    width: 500px; 
 
    height: 500px; 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    flex-wrap: wrap-reverse; 
 
    border: 1px solid red; 
 
    flex-grow: 0; 
 
    flex-basis: 0%; 
 
    } 
 
    .y { 
 
    width: 80px; 
 
    height: 80px; 
 
    border: 1px solid green; 
 
    margin: 3px; 
 
    }

<div class="x"> 
 
    <div class="y">1</div> 
 
    <div class="y">2</div> 
 
    <div class="y">3</div> 
 
    <div class="y">4</div> 
 
    <div class="y">5</div> 
 
</div>