Poziomy układ murarski z Flexbox Tylko CSS

Próbuję utworzyć poziomy układ murów przy użyciu tylko CSS i Flexbox. Problem w tym, że mam do czynienia z pionowymi przerwami pomiędzy elementami, bez użycia align-left: stretch; czy można zamknąć luki?Poziomy układ murarski z Flexbox Tylko CSS

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


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

full codepen here

Źródło

2015-02-23 Julian Norton

pionowe szczeliny między którymi elementami? – tubes

Pomiędzy kartą 2 i 5. Próbuję ustawić je tak, aby wyglądały tak: [mura z kodekami] (http://codepen.io/desandro/pen/ClgeH) –

Wystarczy sugestia, aby poprawić swoje pytanie i czytelność : dołącz odpowiednie części kodu. –

Oto jedna opcja z użyciem zawijanych kolumn, ale wymaga ona stałej wysokości.

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

Lepszym rozwiązaniem dla układu CSS murze jest użycie kolumny, przykładem jest na tym blogu 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%; 
}

Źródło

2015-02-23 23:44:46 user2548213

Podoba mi się twoje rozwiązania! Zakładałem, że bloki muszą przepływać od lewej do prawej. W twoim przypadku przepływają od góry do dołu. – joerideg

+28

Kolumny nie są lepszym rozwiązaniem, ponieważ kolumny powodują, że najnowsze przedmioty idą w dół po lewej kolumnie, w przeciwieństwie do najnowszych przedmiotów wyświetlanych po lewej stronie, a następnie w dół. – comu

To jest rozwiązanie problemu (CSS, bez pionowych odstępów, układ muru) https://stackoverflow.com/a/25668648/871781 – JoeCodeCreations

Taśma pole okład opakowuje przelewająca się elementy do nowego rzędu. Ten nowy wiersz, podobnie jak w poprzednim rzędzie, ma wysokość najsilniejszego dziecka w tym segmencie. Nie pozwoli, aby elementy w wierszu przekroczyły granice wierszy.

Tak, niestety, nie można zamykać pionowych szczelin przy pomocy flexbox.

Źródło

2015-02-23 20:06:49 joerideg

Poziomy układ murarski z Flexbox Tylko CSS

Odpowiedz

Powiązane problemy