如何從底部到頂部對齊HTML元素？

Question

如何在HTML中實現從底部到頂部對齊元素的佈局？

基本HTML結構：

<div class="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 

期望的結果：

尋找CSS或JavaScript解決方案。

Answer 1

你可以用純粹的CSS使用Flexbox來做到這一點。關鍵屬性是flex-wrap，可以將其設置爲wrap-reverse以獲得所需的佈局。

演示：

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap-reverse; 
 
    align-content: flex-start; 
 
    /* demo */ 
 
    width: 40%; 
 
    min-height: 400px; 
 
    border: 3px solid #000; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
.container div { 
 
    height: 100px; 
 
    width: 50%; 
 
    border: 1px dashed #000; 
 
    box-sizing: border-box; 
 
    padding: 1em; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div>

的jsfiddle：https://jsfiddle.net/v4z38apL/1/

P.S當然，你需要考慮瀏覽器的支持和供應商的前綴。