Flexbox項目可以更換而不是展開其容器嗎？

我正在創建一種卡片式佈局，其中各個卡片垂直堆疊。在更高的屏幕寬度下，使用越來越多的卡片列 - 儘可能少地使用垂直空間。Flexbox項目可以更換而不是展開其容器嗎？

我正在使用flex-flow: column wrap佈局來執行此操作。但是，我發現該容器需要有一個height或max-height以鼓勵卡包裝。鑑於卡的數量和他們的個人大小可能會發生變化，我不能斷定這個高度最好是不切斷物品或下面有太多空間。

任何人都可以告訴我，如果這是可能的，或者如果我做錯了什麼？

附帶摘錄。

.card-container { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: stretch; 
 
} 
 
.card { 
 
    flex: 0 0 auto; 
 
    width: 15rem; 
 
    margin: 0.5rem; 
 
    background-color: #f4f4f4; 
 
    /* max-height: ??? */ 
 
}

<div class="card-container"> 
 
    <div class="card" style="height: 20em"></div> 
 
    <div class="card" style="height: 17em"></div> 
 
    <div class="card" style="height: 5em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 21em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 17em"></div> 
 
    <div class="card" style="height: 8em"></div> 
 
    <div class="card" style="height: 20em"></div> 
 
    <div class="card" style="height: 16em"></div> 
 
    <div class="card" style="height: 19em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 5em"></div> 
 
</div>

來源

2015-12-02 Ben Cox

我也經常遇到這個問題。爲了讓flex項目按列方向纏繞，需要定義高度。 SMH。問題不會發生在行方向上。我還沒有找到解決方案。更糟糕的是，一旦你解決了這個問題，你需要處理這個問題：http://stackoverflow.com/q/33891709/3597276 –

爲了實現這一點，你需要設置最大高度爲柔性容器，不撓的項目，因爲你想柔性項目在列排列，增加列寬屏幕你不想柔性物品的尺寸爲柔性容器改變，所以設置這個相對值：

.card-container { 
    max-height: 100vh 
}

一下添加到柔性容器。這裏的「vh」是代表「視口高度」的相對單位。 1 vh =視口高度的1％。視口=瀏覽器窗口大小。如果視口高50釐米，1 vh = 0.5釐米。因此無論屏幕有多寬，插入多少張卡片，卡片的大小如何，當內容的高度大於視口的高度時，都會使用多列。

這些還將在顯示器上創建水平滾動條，這些滾動條的設置寬度比內容窄。所以，如果你不想滾動條出現，這可以通過媒體查詢來解決。

來源

2015-12-15 22:04:11

Flexbox項目可以更換而不是展開其容器嗎？

回答

相關問題