右上の右下にあるdivを整列します

Question

どのようにして複数のdivを下に並べることができますか。下の写真のように。

Answer 1

あなたは位置に設定flex-direction: columnこの

1. を行うためにFlexboxを使用することができます移動するには、親
2. justify-content: flex-endの右側にdivを移動するために、別の
3. align-items: flex-endの上に1をdivタグ親の下に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>

更新：あなたはフレックスとフレキシボックスを使用することができます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

を使用することができますdiv要素の順序を逆にします - 方向：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>