根據視口寬度在列中排列布局

Question

如何從一個列表中製作幾列與CSS？
如圖列必須根據與媒體查詢屏幕寬度改變的數量這裏：

LAGE屏幕：

Row1 Row6 Row11 
Row2 Row7 Row12 
Row3 Row8 Row13 
Row4 Row9 Row14 
Row5 Row10 

中間屏幕：

Row1 Row8 
Row2 Row9 
Row3 Row10 
Row4 Row11 
Row5 Row12 
Row6 Row13 
Row7 Row14 

小屏幕：

Row1 
Row2 
Row3 
Row4 
Row5 
Row6 
Row7 
Row8 
Row9 
Row10 
Row11 
Row12 
Row13 
Row14 

這是我HTML代碼：

<ul> 
    <li>Row1</li> 
    <li>Row2</li> 
    <li>Row3</li> 
    <li>Row4</li> 
    <li>Row5</li> 
    <li>Row6</li> 
    <li>Row7</li> 
    <li>Row8</li> 
    <li>Row9</li> 
    <li>Row10</li> 
    <li>Row11</li> 
    <li>Row12</li> 
    <li>Row13</li> 
    <li>Row14</li> 
</ul> 

Answer 1

你可以用CSS multi-column layout做到這一點。只需添加support並不是最好的。

或者，如果你能在ul設置固定的高度，你可以使用Flexbox的和flex-direction: column;這樣DEMO，但它不是真正的「靈活」的解決方案。

ul { 
 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; /* Firefox */ 
 
    column-count: 3; 
 
    list-style-type: none; 
 
} 
 

 
@media(max-width: 992px) { 
 
    ul { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
    } 
 
} 
 

 
@media(max-width: 480px) { 
 
    ul { 
 
    -webkit-column-count: 1; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; /* Firefox */ 
 
    column-count: 1; 
 
    } 
 
}

<ul> 
 
    <li>Row1</li> 
 
    <li>Row2</li> 
 
    <li>Row3</li> 
 
    <li>Row4</li> 
 
    <li>Row5</li> 
 
    <li>Row6</li> 
 
    <li>Row7</li> 
 
    <li>Row8</li> 
 
    <li>Row9</li> 
 
    <li>Row10</li> 
 
    <li>Row11</li> 
 
    <li>Row12</li> 
 
    <li>Row13</li> 
 
    <li>Row14</li> 
 
</ul>

Answer 2

您可以使用CSS columns與media queries合併成基於視口寬度的列數。

在以下示例中，當視口寬度爲700px時，列從3更改爲2，當視口寬度爲500px時，列從2更改爲1。
請注意，您並不需要爲窄視作爲一隻顯示指定什麼是默認的佈局，並只能指定columns開始於你所謂的「中間屏幕」：

@media (min-width: 500px){ 
 
    ul{ 
 
    -webkit-columns: 2; 
 
    -moz-columns: 2; 
 
    columns: 2; 
 
    } 
 
} 
 
@media (min-width: 700px){ 
 
    ul{ 
 
    -webkit-columns: 3; 
 
    -moz-columns: 3; 
 
    columns: 3; 
 
    } 
 
}

<ul> 
 
    <li>Row1</li> 
 
    <li>Row2</li> 
 
    <li>Row3</li> 
 
    <li>Row4</li> 
 
    <li>Row5</li> 
 
    <li>Row6</li> 
 
    <li>Row7</li> 
 
    <li>Row8</li> 
 
    <li>Row9</li> 
 
    <li>Row10</li> 
 
    <li>Row11</li> 
 
    <li>Row12</li> 
 
    <li>Row13</li> 
 
    <li>Row14</li> 
 
</ul>

請注意，列屬性需要供應商前綴以最大限度地提高瀏覽器支持，它是由IE10 +（更多信息在canIuse）支持。

Answer 3

這是一個簡單的解決方案，但在舊版瀏覽器中更受歡迎。

您可以通過調整它們的大小並將它們顯示爲行內塊來劃分LI。

在這種情況下，每列4列25％寬度，當屏幕大於768px時，寬度爲2列，當屏幕小於768px時。（只要你想，你可以添加儘可能多的媒體查詢）

li { 
 
    width: 25%; 
 
    display: inline-block; 
 
    margin: 0 -2px; 
 
    } 
 

 
@media (max-width: 768px){ 
 
    li{ 
 
     width: 50%; 
 
    } 
 
}

<ul> 
 
    <li>Row1</li> 
 
    <li>Row2</li> 
 
    <li>Row3</li> 
 
    <li>Row4</li> 
 
    <li>Row5</li> 
 
    <li>Row6</li> 
 
    <li>Row7</li> 
 
    <li>Row8</li> 
 
    <li>Row9</li> 
 
    <li>Row10</li> 
 
    <li>Row11</li> 
 
    <li>Row12</li> 
 
    <li>Row13</li> 
 
    <li>Row14</li> 
 
</ul>