Horizontales Mauerwerk mit Flexbox CSS nur

Ich versuche ein horizontales Mauerwerk Layout nur mit CSS und Flexbox zu erstellen. Das Problem, das ich habe, ist, gibt es vertikale Lücken zwischen den Elementen, ohne align-left: stretch; ist es möglich, die Lücken zu schließen?Horizontales Mauerwerk mit Flexbox CSS nur

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


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

full codepen here

Quelle

2015-02-23 Julian Norton

Vertikale Lücken zwischen welchen Elementen? – tubes

Zwischen Karte 2 und 5. Ich versuche, sie so auszurichten: [Codepen Mauerwerk] (http://codepen.io/desandro/pen/ClgeH) –

Nur ein Vorschlag, um Ihre Frage und Lesbarkeit zu verbessern : Fügen Sie die relevanten Teile Ihres Codes ein. –

Hier ist eine Option mit umhüllten Spalten, aber es erfordert eine feste Höhe.

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

Eine bessere Option für CSS-Layout Mauerwerk ist Spalten zu verwenden, wobei ein Beispiel auf diesem Blog-Post ist 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%; 
}

Quelle

2015-02-23 23:44:46 user2548213

Ich mag deine Lösungen! Ich nahm an, dass die Blöcke von links nach rechts fließen mussten. In Ihrem Fall fließen sie von oben nach unten. – joerideg

+28

Spalten ist keine bessere Lösung, da Spalten die neuesten Elemente in der linken Spalte nach unten gehen, im Gegensatz zu den neuesten Elementen links links und dann nach unten gehen – comu

Dies ist die Lösung für das Problem (CSS, kein vertikaler Abstand, Mauerwerk Layout) https://Stackoverflow.com/a/25668648/871781 – JoeCodeCreations

Flex-Box Wrap umschließt die überquellenden Elemente auf eine neue Zeile. Diese neue Reihe hat genau wie die vorherige Reihe die Höhe des höchsten Flex-Kindes. Es wird nicht zulassen, dass die Elemente in der Zeile außerhalb dieser Zeilengrenzen liegen.

Also leider kann man die vertikalen Lücken mit der flexbox nicht schließen.

Quelle

2015-02-23 20:06:49 joerideg

Horizontales Mauerwerk mit Flexbox CSS nur

Antwort

Verwandte Themen