自動換行列：用列填充可用寬度

Question

我在flex容器中有不同大小的項目，我想根據內容在不同寬度的多列中顯示。 flex-flow: column wrap適用於固定容器高度的我，但我已爲容器固定寬度，並且希望高度取決於內容。即我需要寬度適合的列數。 例如，如何必須看：

.container { 
 
     height: 80px; 
 
     display: flex; 
 
     align-items: flex-start; 
 
     justify-content: flex-start; 
 
     flex-flow: column wrap; 
 
     align-content: left; 
 
    } 
 
    .container > span { 
 
     margin: 3px 12px; 
 
     background: #ebd2b5 
 
    }

<div class="container"> 
 
    <span>Apple</span> 
 
    <span>Apricot</span> 
 
    <span>Avocado</span> 
 
    <span>Banana</span> 
 
    <span>Bilberry</span> 
 
    <span>Blackberry</span> 
 
    <span>Blackcurrant</span> 
 
    <span>Blueberry</span> 
 
    <span>Boysenberry</span> 
 
    <span>Currant</span> 
 
    <span>Cherry</span> 
 
    <span>Cherimoya</span> 
 
    <span>Cloudberry</span> 
 
    <span>Coconut</span> 
 
</div>

與CSS的任何解決方案？

Answer 1

不，用純css你不行。

但是，如果您使用align-content：stretch;您可以將當前列分配到整個容器寬度。

.container { 
 
     height: 80px; 
 
     display: flex; 
 
     align-items: flex-start; 
 
     justify-content: flex-start; 
 
     flex-flow: column wrap; 
 
     align-content: stretch; 
 
    } 
 
    .container > span { 
 
     margin: 3px 12px; 
 
     background: #ebd2b5 
 
    }

<div class="container"> 
 
    <span>Apple</span> 
 
    <span>Apricot</span> 
 
    <span>Avocado</span> 
 
    <span>Banana</span> 
 
    <span>Bilberry</span> 
 
    <span>Blackberry</span> 
 
    <span>Blackcurrant</span> 
 
    <span>Blueberry</span> 
 
    <span>Boysenberry</span> 
 
    <span>Currant</span> 
 
    <span>Cherry</span> 
 
    <span>Cherimoya</span> 
 
    <span>Cloudberry</span> 
 
    <span>Coconut</span> 
 
</div>