カード列を水平に並べるにはどうしたらいいですか？

Question

私はカードのスマートスクロールリストを持っている、と私はcard-columnsの外観を愛しながら、それは上下に発注することをそのかなりイライラ、そうのように： 1 4 7 2 5 8 3 6 9

この垂直の順序はどこ何のために基本的に役に立たないようですコンテンツの読み込みにはいくつかの項目があります。私は50の項目がある場合、最も重要でないもののいくつかは一番上になります！

フレックスボックスを使用していくつかのバリエーションを試しましたが、何もできませんでした。誰でも水平方向の注文がありますか？ documentedとして

Answer 1

レンダリングされた列の順序がされるので、CSSの列の順序は上から下にあり、右に左には...

1 3 5 
2 4 6 

CSSの順序を変更する方法はありません列。 Masonryのような別のソリューションを使用することをお勧めします。 CSS http://w3bits.com/flexbox-masonry/

と垂直または水平石工を設定する（ブートストラップのために直接ではなく）、ここでいいと基本的な解決策を見つけたhttps://github.com/twbs/bootstrap/issues/17882

Answer 2

私がテストを与え、ブートストラップ4

を使用する方法フィードバックを与えます

.masonry { 
    display: flex; 
    flex-flow: row wrap; 
    margin-left: -8px; /* Adjustment for the gutter */ 
} 

.masonry-brick { 
    flex: auto; 
    height: 250px; 
    min-width: 150px; 
    margin: 0 8px 8px 0; /* Some gutter */ 
} 
.masonry-brick { 
    &:nth-child(4n+1){ 
    width: 250px; 
    } 
    &:nth-child(4n+2){ 
    width: 325px; 
    } 
    &:nth-child(4n+3){ 
    width: 180px; 
    } 
    &:nth-child(4n+4){ 
    width: 380px; 
    } 
} 

垂直使用用：水平利用ため

.masonry { 
    display: flex; 
    flex-flow: column wrap; 
    max-height: 800px; 
    margin-left: -8px; /* Adjustment for the gutter */ 
} 

.masonry-brick { 
    margin: 0 8px 8px 0; /* Some gutter */ 
}