divを右下から積み重ねる

Question

親のdivにカラーブロック（bg色のdiv）を追加します。各親divには、親の右下に表示されるこれらのカラーブロックが最大3つあります。

マイコード（下記）3つの以下の色のために必要とされるものでなく、しかし、等色が追加された場合には、一番下の行に2つの空のスペースを残して下の行にジャンプします。私がしたいのは、上の行に四番目の色を表示し、一番下の行に空白がないことです。

あなたは私が起こるしたいもののハードコードされた例と一緒に行動hereで問題を見ることができます。

<style> 
.container { 
    position: relative; 
    width: 200px; 
    height: 142px; 
} 

.colorSwatches { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    max-width: 100px; 
    max-height:60px; 
    text-align:right 
} 

.swatch { 
    display: inline-block; 
    width: 25px; 
    margin: 2px; 
    height: 25px; 
    background-color: rgb(255, 0, 0); ///or whatever 
} 
</style> 


<div class="container"> 
    <div class="colorSwatches"> 
    <div class="swatch"></div> 
    <div class="swatch"></div> 
    <div class="swatch"></div> 
    <div class="swatch"></div> 
    </div> 
</div> 

ありがとうございました。

私はあなたには、いくつかの フレキシボックス魔法でレイアウトすることをやってのけることができると思い

Answer 1

：

• はこのコンテナとのflex-wrapルールに続いdisplay: flex小道具
• で、あなたのケース.colorSwatchesには、あなたの.swatchesコンテナを設定します：flex-wrap: wrap-reverse、その内部の子どもたちは、flex-directionの反対方向に次の行に折り返します。これはデフォルトではrowと思います。
• そして最後に、アイテムは内部の自分のコンテナの終わりにレイアウトを開始するように、コンテナ、justify-content: flex-end;に追加します。

ここjsfiddle demoと資源のカップルです：

• Flexbox
• Justify-content
• Flex-wrap