生成Flex項目在列方向容器包裝

所以，使用行佈局中的所有我需要做的包裝元素在Flex DIV是這樣的：生成Flex項目在列方向容器包裝

div { 
 
    display: flex; 
 
    flex-direction: row; /* I want to change this to column */ 
 
    flex-wrap: wrap;  /* wrap doesn't seem to work on column, only row */ 
 
}

<div> 
 
    <p>these</p> 
 
    <p>will</p> 
 
    <p>wrap</p> 
 
</div>

這適用於我的行，但我想使它適用於我的列。

我試着改變flex-direction到column，但它似乎沒有工作。有誰知道如何獲得這個功能？

來源

2017-05-07 Frank

行工作原理是，當項目達到視/容器它所包裝的寬度，但對於列，自視不具有高度（默認是'auto'），它會繼續增長，所以爲了實際包裹，它需要一個設定的高度。 – LGSon

啊，你很聰明。我在父元素上設置了高度，但不是直接在我的彈性盒上。我只是把它設置爲繼承，瞧！有用！非常感謝！這是否意味着視口只跟蹤寬度而不是高度？ – Frank

是的，一個頁面的正常流向下，因此它會簡單地開始滾動時，內容變得很大，橫向它不 – LGSon

塊級元素默認佔用其包含塊的全部寬度。實際上，這解析爲width: 100%，其在水平方向上設置內容流的中斷。

因此，flex項目可以默認包裝在行方向容器中。

但是，HTML或CSS中的任何內容都不會在塊級元素上設置默認高度。高度由內容驅動（height: auto）。

這意味着元素將垂直流動，而不會有任何理由中斷。

（我猜某處演化線，可能可用性研究的基礎上，會議決定，這將是好的Web應用程序的垂直擴展，而不是水平。）

這就是爲什麼Flexbox的沒有按不會自動在列方向上包裝物品。它需要作者定義的高度作爲突破點。

但是，通常情況下，佈局的高度是動態的，因此無法設置特定的高度。這使得flexbox無法用於在列方向上打包項目。一個偉大的選擇是CSS Grid Layout，不需要高度設置在容器上：

div { 
 
    display: grid; 
 
    grid-gap: 10px; 
 
} 
 

 
p:nth-child(3n + 1) { 
 
    grid-row: 1; 
 
    background-color: aqua; 
 
} 
 

 
p:nth-child(3n + 2) { 
 
    grid-row: 2; 
 
    background-color: orange; 
 
} 
 

 
p:nth-child(3n + 3) { 
 
    grid-row: 3; 
 
    background-color: lightgreen; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 10px; 
 
}

<div> 
 
    <p>ONE</p> 
 
    <p>TWO</p> 
 
    <p>THREE</p> 
 
    <p>FOUR</p> 
 
    <p>FIVE</p> 
 
    <p>SIX</p> 
 
    <p>SEVEN</p> 
 
    <p>EIGHT</p> 
 
    <p>NINE</p> 
 
</div>

瀏覽器支持CSS電網

鉻 - 全力支持2017年3月8日（版本57）
Firefox - 2017年3月6日全面支持（版本52）
野生動物園 - 全力支持2017年3月26日（10.1版）
邊緣的 - 完全支持爲2017年10月16日（16版）
IE11的 - 當前規範不支持;支持過時版本

下面是完整的畫面：http://caniuse.com/#search=grid

來源

2017-05-07 17:09:54

謝謝，我會試試看。我目前正在使用'writing-mode：vertical-lr'和'flex-direction：row'來避免flexbox不適合包裝內容的小錯誤，並且我在flexbox上設置了一個高度以獲取要包裝的內容。 – Frank

生成Flex項目在列方向容器包裝

回答

相關問題