Howto安裝Flexbox始終有3列？

我使用Flexbox創建了一個網站來對齊項目。我有div .main包含內容divs。這是CSS：Howto安裝Flexbox始終有3列？

.main{ 
    margin: 0 auto; 
    /*max-height: 2400px;*/ 
    max-width: 800px; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    align-content: center; 
}

現在只有一個長長的列，如果我沒有設置高度。是否有辦法始終保持3列，並讓高度儘可能低，但仍足夠高以顯示所有內容？

這是一個小提琴：jsfiddle.net/m8kL9zje 如果添加了一些內容div，他們將開始形成第4列。我希望他們增加高度

來源

2016-12-19 Niqql

爲什麼，如果你想他們都在同一行，你有'柔性wrap'？ –

我希望他們在列中，而不是在行中。 flex-wrap是創建列 – Niqql

所以...你想要這樣的東西？ https://jsfiddle.net/xu5y0aL2/或者我錯過了一些東西... –

你並不真的需要這個flexbox。只是你的css columns屬性。

.content { 
 
    background: #ccc; 
 
    columns: 3; 
 
}

<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim quis tortor in vulputate. In malesuada augue in risus imperdiet, id tempus velit vehicula. Phasellus luctus sem in venenatis ornare. Lorem ipsum dolor sit amet, consectetur adipiscing 
 
    elit. Suspendisse tempus mauris vel rutrum eleifend. Nulla lectus magna, suscipit ac nunc eget, blandit pretium dolor. Nam nec eros vel diam malesuada placerat id et quam. Curabitur nisl neque, mattis id ornare egestas, faucibus non urna. Nunc pulvinar 
 
    mattis placerat. Donec nec venenatis nulla, vel aliquam turpis. Nullam pretium massa a lacus eleifend venenatis non vel neque. Etiam at turpis pretium, consectetur dolor sed, sagittis risus. In varius vehicula mi, sed volutpat nunc feugiat in. Mauris 
 
    consequat velit vel lectus vulputate, non facilisis nibh suscipit. Maecenas blandit nisl at orci congue cursus. Curabitur egestas quam mollis dui viverra, at lacinia nunc viverra. Donec ac lectus velit. Vestibulum sodales quam ac cursus vehicula. Cum 
 
    sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque finibus lorem id diam aliquet hendrerit. In sollicitudin ac justo sed congue. Vivamus in egestas turpis. Mauris id tempus mi. Nam nec ligula porttitor, sagittis 
 
    augue vitae, tristique velit. Sed ut lobortis mauris. In tempor urna eget rutrum condimentum. Nulla facilisi. Donec tincidunt pharetra libero sed aliquet. Donec eu nibh in libero ullamcorper gravida. Nullam vel dapibus purus. Etiam feugiat tortor at 
 
    mauris accumsan, sit amet vehicula nisl mollis. In hac habitasse platea dictumst. Praesent id diam tincidunt, fringilla eros eu, bibendum urna. Proin eu ultricies tellus. Sed in ante ultricies, blandit eros nec, ultricies elit. Integer quis aliquet 
 
    velit. Vestibulum condimentum orci mauris, in faucibus libero aliquam nec. Etiam id ornare ante. Integer odio leo, malesuada ac dignissim eget, ornare eu magna. Duis et metus ipsum. Quisque tortor velit, imperdiet vitae pulvinar et, eleifend tincidunt 
 
    erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam suscipit arcu nulla, vitae tempus urna sollicitudin ac. Curabitur hendrerit porttitor elit et varius. Suspendisse fringilla, libero et euismod malesuada, eros arcu vulputate 
 
    lorem, quis elementum velit ipsum non nulla. Donec ac nulla ac urna tincidunt sodales. Etiam efficitur nibh sed tempus facilisis. Fusce efficitur lacus mi, a molestie orci pulvinar a. Maecenas id risus elit. Proin eu tortor posuere, rutrum justo in, 
 
    varius lacus.</div>

來源

2016-12-19 16:25:41 Brad

哇，從來沒有聽說過列的風格！非常非常感謝你！正是我在找什麼！ – Niqql

沒問題，很樂意幫忙。 – Brad

請記住，'列'仍然有非常有限的瀏覽器支持：http://caniuse.com/#search=column –

Howto安裝Flexbox始終有3列？

回答

相關問題