HTML要素を下から上に揃える方法は？

Question

要素を下から上に揃えるHTMLレイアウトを実現するにはどうすればよいですか？

基本的なHTMLの構造：

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

望ましい結果：CSSやJavaScriptのソリューションを探してい

。

Answer 1

Flexboxを使用して純粋なCSSでこれを行うことができます。キープロパティは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、ブラウザのサポートとベンダープレフィックスを検討する必要があります。