列に要素を均等に配分する

Question

項目が配置される.wrapという1つのdivがあります。未知の量の品目（.thing）は、4つの列に並べる必要があります（互いの上に積み重ねる）。

<div class="wrap"> 
    <div class="thing"> thing1 </div> 
    <div class="thing"> thing2 </div> 
    ... 
</div> 

列が空でないように列を均等に配分する必要があります。これは非常に簡単です：

.wrap { 
    column-count: 4; 
    column-fill: balance; 
} 

しかし、はFirefoxでしか動作しません。

最新のすべてのバージョンのブラウザでこのレイアウトを達成するには、別のCSS方法がありますか？具体的には、フレックスボックスはここで助けてくれますか？

私は列として機能するために余分なdivを追加することはできませんし、JSソリューションを望んでいないことに注意してください。ここで

は均一に分布→http://jsfiddle.net/bpdtkmmt/

Answer 1

はい、あなたはここで-とフレキシボックスを使用することができ、それは仕事がほとんどの部分で片付ける必要がある以外の目的のレイアウトを持っているフィドルです。それは一種のハッキーです。あなたはCSSの列ルールを使用して放棄しています。バラツキが多少あるので、それ以上行/列を追加すると、値を変更する必要があります。行ごとの列数を保持するには、ラッパーの固定高さまたは高さの高さを設定する必要があります。ここから、display: flexルールを持つフレックスコンテナとしてラッパーコンテナを確立し、flex-direction: columnとflex-wrap: wrapまたは略称flex-flow: column wrapのいずれかを使用して複数の列を設定します。

各列にx個の項目があることを確認するには、flex-basisルールを使用して、入力する列の割合を設定する必要があります。したがって、3つの項目を含む列にはflex-basis: 33.33%があります。 3つのアイテムからなる行が2つ、2つのアイテムからなる行が2つ必要であることを示したので、nth-childまたはnth-of-typeセレクタを使用して、10番目のエレメントから新しいフレックスベース50%を設定する必要があります。そして、もちろん、あなたがページ上で物事要素を取りたい幅のパーセンテージを設定する必要があります（4行= 25％）。すべての要素が同じサイズのあることを確認するために、あなたはフレキシボックス内のテキストを中心にしても問題のまま、しかし

を使用する必要があるとあなたがflexまたはinline-flexへdisplayを設定することにより、フレックスコンテナとして物事を確立する必要がありますおよびjustify-content属性をcenterに設定して、をcolumnとします。

justify-content: center; 
flex-direction: column; 
text-align: center 

http://jsfiddle.net/hxcnoxx9/10/

このCSSはあなたの問題を解決する必要があります。

.wrap { 
    height: 180px; 
    background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%); 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.thing { 
    background: rgba(255, 255, 255, .2); 
    color: #fff; 
    width: 25%; 
    flex-basis: 33.33%; 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
} 

.thing:nth-child(1n+10) { 
    flex-basis: 50%; 
}