右下隅からブロックグリッドを開始

Question

私は、右下隅に常に終了する順序のないリストを得るための素晴らしいCSS方法を探しています。例：

 || 1 || 2 
    3 || 4 || 5 

通常のブロックグリッドでは、浮動リストアイテムを使用しています。私は解決策のためにflexboxを見てきましたが、満足するものは何も出てこなかった。このリストに1つの項目を追加する

は、このようなリストを生成します：

1 || 2 || 3 
    4 || 5 || 6 

をもう一つは、あなたが行うことができます

 ||  || 1 
    2 || 3 || 4 
    5 || 6 || 7 

Answer 1

。追加の子要素を必要な数だけ追加できます。 （注：私は、デフォルトでは、コンテナの高さを左）：30％ ``フロートとの組み合わせで：left`

* { 
 
    box-sizing: border-box; 
 
    } 
 
    .x { 
 
    width: 302px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex-wrap: wrap-reverse; 
 
    border: 1px solid red; 
 
    flex-grow: 0; 
 
    flex-basis: 0%; 
 
    } 
 
    .y { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid green; 
 
    }

<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>

Answer 2

だろう余白の使い方とフレキシボックスに「浮く」 。

あなたが右にフロートする場合：

margin-left: auto; 

あなたが探して何本か？または、私が間違っている： http://codepen.io/powaznypowazny/pen/ZLdBxa

Answer 3

このソリューションでは、ハードコードされた寸法を持つ必要はありません。また、子供がいなくても、自動的に鉛直空間全体を埋めるように成長することなく、親の最小高さを設定することができます。その高さに応じて、右下に積み重なります。

float:rightは、下隅から順に逆順に表示されます。あなたがflex-wrap: wrap-reverseとflex-direction: row-reverseとフレキシボックスを使用することができます

parent { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex-wrap: wrap-reverse; 
 
    min-height: 100vh;   /* desired height */ 
 
    align-items: flex-end; 
 
    align-content: flex-start; 
 
} 
 
child { 
 
    flex: 1 0 33.3333%; 
 
    max-width: 33.3333%; 
 

 
    /* below mostly styling, not part of the layout solution */ 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 1rem; 
 
    border: 2px solid white; 
 
    background-color: #eee; 
 
} 
 

 
body {margin: 0;}

<parent> 
 
    <child> 1 </child> 
 
    <child> 2 </child> 
 
    <child> 3 </child> 
 
    <child> 4 </child> 
 
    <child> 5 </child> 
 
    </parent>