Flexboxが常に3つの列を持つようにセットアップするには？

Question

私はアイテムを整列させるためにフレックスボックスでサイトを作成しています。私は内容がdivsを含むdiv .mainを持っています。これはCSSです：

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

高さを設定しないと、長い列が1つしかありません。常に3つの列を保持し、すべてのコンテンツを表示するのに十分な高さをできるだけ低く設定する方法はありますか？

ここには、次のようなものがあります：jsfiddle.net/m8kL9zje コンテンツディビジョンを追加すると、4番目の列が作成されます。私はそれらの高さを増やすことを望む

Answer 1

これのために本当にフレックスボックスは必要ありません。ちょうどあなたの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>