各行のギャップが同じで反応するレイアウト

Question

私は常にランダムな要素数を持つコンテナを持っています。は常に左側に配置されます。コンテナの幅は増減できます。

コンテナのサイズが増加している場合、行+1の最初の要素は1行戻って右側に表示されます。しかし、それは左と右の側面に詰め物とそこに収まることができれば、それは一行だけ戻る必要があります。

要素にはスペースが1つもありませんが、要素間の間隔は、行+1の要素がこの行に収まるまで増加する必要があります。

同じ機能は、逆の方法でも機能します。

.container { 
 
    min-height: 400px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    align-content: flex-start; 
 
} 
 

 
.container:after { 
 
    display: block; 
 
    content: " invisible node "; 
 
    flex(999 999 auto); 
 
} 
 

 
.item { 
 
    flex: 0 0 auto; 
 
    margin: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

https://jsfiddle.net/p6k537ep/

2行目の要素との間の空間は、第一と同じではないことを私の問題のIST：ここ

は私のコードであります行（いくつの要素があるかによって異なります）。

編集：

しかし、彼らがanoughスペースを持っている場合は、2番目の行からの要素だけabouve 1行を移動できることに取り組んでいます。ギャップは最初の行で正しい方法で成長しているが、2番目の行では成長していない。

Answer 1

:after疑似要素のmarginプロパティを使用して、ブロックをまとめて保持することができます。

fiddle

.container { 
 
    min-height: 400px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    align-content: flex-start; 
 
} 
 

 
.container:after { 
 
    display: block; 
 
    content: " "; 
 
    margin-left: auto; /* added */ 
 
} 
 

 
.item { 
 
    flex: 0 0 auto; 
 
    margin: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 2

私の知る限り、これは.itemと同じ幅と横余白と（最終行の水平方向のリズムを保持するように見えない非セマンティックヘルパー要素を追加することなくフレキシボックスに解けるありませんs、しかし高さはゼロ）。

しかし、これは、このために完全と思われるCSSグリッドに容易に解決可能である：インラインブロックと解けるの

.container { 
 
    min-height: 400px; 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, 60px); 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    align-content: start; 
 
} 
 

 
.item { 
 
    flex: 0 0 auto; 
 
    margin: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

と種類、同様の擬似要素を使用してハックとインラインの書式設定のいくつかの "魔法"：

.container { 
 
    min-height: 400px; 
 
    text-align: justify; 
 
    font-size: 5px; 
 
    line-height: 0; 
 
} 
 

 
.container:after { 
 
    display: inline; /* it's important, it should continue the same line! */ 
 
    /* each character below acts as an invisible placeholder for the item */ 
 
    /* with em dashes, they would be 1em (5px here) wide each */ 
 
    content: '— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — '; 
 
    letter-spacing: 55px; /* expand each placeholder to the item width */ 
 
    word-spacing: -56px; /* collapse the whitespaces */ 
 
    margin-left: 5px; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    vertical-align: top; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

しかし、正直なところ、第2のオプションを本番環境で使用することはお勧めしません。代わりにアイテムを左揃えにすると、おそらくグリッドをサポートしていないブラウザではより良いフォールバックになるでしょう。