Yatay kutu düzeni. Sorun şu ki, align-left: stretch; kullanmadan elemanlar arasında dikey boşluklar var, boşlukları kapatmak mümkün mü?Sadece CSS ve flexbox kullanarak yatay kutu düzeni oluşturmak için sadece CSS ile
.card-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.card {
width: 25%;
flex: 1 0 auto;
}
Sarılmış sütunları kullanarak bir seçenek aşağıdadır, ancak sabit bir yükseklik gerektirir.
.card-container {
display: flex;
flex-flow: column wrap;
height:100vh;
align-items: center;
background-color: #888;
}
CSS yığma düzeni için daha iyi bir seçenek örnek 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%;
}
Çözümlerinizi beğeniyorum! Blokların soldan sağa doğru akması gerekiyordu. Senin durumunda, yukarıdan aşağıya doğru akıyorlar. – joerideg
Sütunlar en iyi öğelerin soldaki sütunun en soldaki sütunları soldan aşağı doğru listelendiğinden ve daha sonra – comu
aşağı doğru gittiğinden daha iyi bir çözüm değildir. Bu, sorunun çözümü (CSS, dikey boşluk yok, duvar düzeni) https://stackoverflow.com/a/25668648/871781 – JoeCodeCreations
Flex kutu sarma yeni satıra taşan unsurlar sarar. Bu yeni satır, tıpkı bir önceki satırda olduğu gibi, içindeki en ağır esnek çocuğun yüksekliğine sahiptir. Satırdaki öğelerin bu satır sınırları dışına çıkmasına izin vermez. Ne yazık ki, hayır esnek kutu ile dikey boşlukları kapatamazsınız.
Dikey boşluklar hangi elemanları arasında bu blog mesajına olduğunu sütunları kullanmaktır? – tubes
Kart 2 ve 5 arasında Ben bu gibi hizalamak için onları almaya çalışıyorum: [codepen masonry] (http://codepen.io/desandro/pen/ClgeH) –
Sorunuzu ve okunabilirliğini geliştirmek için sadece bir öneri : kodunuzun ilgili bölümlerini içerir. –