web-dev-qa-db-ja.com

flexbox CSSのみの水平石積みレイアウト

CSSとflexboxのみを使用して、水平の石積みレイアウトを作成しようとしています。私が抱えている問題は、align-left: stretch;を使用せずに要素間に垂直方向のギャップがあることです。ギャップを閉じることは可能ですか？

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: flex-start;
}


.card {
  width: 25%;
  flex: 1 0 auto;
}

ここに完全なコードペン

csslayoutflexboxmasonry
24
Julian

ラップされた列を使用する1つのオプションを次に示しますが、固定の高さが必要です。

.card-container {
  display: flex;
  flex-flow: column wrap;
  height:100vh;
  align-items: center;
  background-color: #888;
}

CSS組積レイアウトのより良いオプションは列を使用することです。例はこのブログ投稿にあります http://w3bits.com/css-masonry/

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
21
user2548213

フレックスボックスラップは、オーバーフローした要素を新しい行にラップします。この新しい行には、前の行と同様に、その中の最も高いフレックスの子の高さがあります。行の要素がその行の境界の外側に出ないようにします。

残念ながら、フレックスボックスで垂直方向の隙間を埋めることはできません。

18
joerideg