初學者的CSS多列佈局教程

CSS多列佈局入門教程：關鍵要點

• CSS多列佈局模塊允許開發者創建響應式多列佈局，在各種屏幕尺寸上都能呈現良好的效果。 column-count屬性指定列數，column-width屬性指定各列寬度。兩者均可設置為auto或正數，並可使用簡寫columns屬性同時設置。
• column-gap屬性指定列間距，column-rule屬性是簡寫形式，允許我們在列之間添加分隔線。 column-fill屬性決定如何分配內容以填充各列，column-span屬性控制元素跨越多列的方式。
• 為了使佈局在所有屏幕尺寸上都顯示良好，應同時指定column-count和column-width。使用媒體查詢可以幫助解決水平滾動或列過長等問題。不支持多列功能的舊版瀏覽器將優雅地降級為單列佈局。

長文本行閱讀起來可能比較費力，讀者更關注不漏行而不是文本內容本身。使用多列佈局可以輕鬆解決這個問題。多列佈局在印刷媒體中非常常見。 CSS多列佈局模塊的功能使我們能夠在網站上再現相同的多列效果。

在網頁設計中使用多列佈局的一個難點在於無法控製文檔大小。在本教程中，我將教您如何創建響應式多列佈局，使其在各種屏幕尺寸上都能呈現良好的效果。我們將從基礎知識開始，然後逐步學習更複雜的概念。

瀏覽器支持

如果您願意使用前綴，則多列佈局的瀏覽器支持非常好。根據Can I use網站的統計數據，此功能在全球95.32%的瀏覽器中受支持。一些瀏覽器（如IE10 、Edge和Opera Mini）完全支持多列佈局。其他瀏覽器（如Firefox和Chrome）需要前綴。

如果您需要支持舊版瀏覽器（通常是指IE9及以下版本），可以使用舊的polyfill。當然，如果瀏覽器不支持多列功能，佈局將優雅地降級為單列佈局。因此，在這種情況下，polyfill可能不是最佳選擇。

CSS多列佈局模塊具有許多不同的屬性。在以下部分中，我將逐一介紹它們。

列數和列寬

column-count屬性指定要為元素設置的列數。您可以將其設置為auto或正數。設置為auto時，列數將由column-width屬性決定。如果設置為正數，則所有列的寬度相等。

column-width屬性指定元素各列的寬度。這並非嚴格遵守。例如，如果可用空間不足，列可以更窄。此屬性也可以設置為auto值或正數。如果設置為auto，寬度將由column-count屬性決定。可用空間將平均分配到所有列中。

或者，可以使用簡寫columns屬性同時設置這兩個值。 columns屬性的語法如下：

.example {
  columns:  || 
}

下面顯示了此屬性的一些使用示例，以及每個示例旁邊的解釋：

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

如您所見，第一個columns定義是第四個的簡寫，第二個是第三個的簡寫。基本上，如果整數沒有分配任何單位，則將其解析為column-count。

這是一個CodePen演示，用於演示到目前為止討論的功能

如果您調整窗口大小，您會注意到以下幾點：

• column-count屬性始終使列數等於您指定的值。唯一變化的是列的寬度。
• column-width屬性會根據可用空間自動更改列數。列數的調整方式是使列寬大於指定值。如果可用空間不足，它也可能會將所有列的寬度調整為較小的值。
• columns屬性使用column-count值作為允許的最大列數的限制。它以這樣的方式調整寬度：column-count永遠不會超過計數限制，並且column-width也與指定的寬度非常接近。

列間距和列規則

column-gap屬性允許我們指定列之間的空間量。您可以將其設置為normal或長度值。它可以為零，但不能為負。當您將其設置為normal時，它使用瀏覽器定義的列之間的默認間距。

column-rule屬性是一個簡寫形式，允許我們在列之間添加分隔線。這類似於使用border-left或border-right屬性。此屬性遵循以下語法：

.example {
  column-rule:  ||  || 
}

對於column-rule-width，您可以將寬度指定為長度（例如3px）或使用關鍵字（例如thin、medium或thick）。 column-rule-style接受dashed、dotted、solid等值。您可以將border-style屬性的所有有效值與column-rule-style一起使用，column-rule-color可以是任何有效的顏色值。

這是一個CodePen演示，其中這些屬性一起使用

列填充和列跨度

column-fill屬性決定如何分配內容以填充各列。此屬性可以設置為auto或balance。設置為auto時，列將按順序填充。使用balance確保內容在所有列之間平均分配。

需要注意的是，如果您為列元素設置固定高度，Firefox會自動平衡內容。但是，其他瀏覽器會開始按順序填充列。

column-span屬性控制元素跨越多列的方式。它有兩個可能的值：all或none。設置為all時，元素將跨越所有列。此屬性在Firefox中不受支持。

這是一個CodePen演示，它將一個blockquote元素“跨越”所有列

在Firefox中，blockquote最終位於中間列，這可能是可以接受的回退。

使用多列創建響應式佈局

現在您已經了解了不同的屬性和可能的值，讓我們關注如何保持佈局的響應性和用戶友好性。

column-count和column-width都有其自身的問題。雖然column-count在較大的設備上可以控制列數，但在較小的設備上佈局會中斷。類似地，column-width將確保列在較小的設備上不會太窄，但在較大的設備上會導致很多列。

為了確保您的佈局在所有屏幕尺寸上都顯示良好，您應該同時指定column-count和column-width。這樣，您可以控制寬度和列數。但是，您可能仍然需要修復一些問題，我們將在接下來討論。

修復水平滾動

如果您為列指定固定高度，則縮小視口將導致出現水平滾動條。由於內容無法垂直擴展，它將水平增長。要解決此問題，您可以調整瀏覽器大小以了解水平滾動條首次出現時的寬度。然後，您可以使用媒體查詢將列的高度在該寬度以下設置為auto。以下是執行此操作的代碼：

.example {
  columns:  || 
}

此CodePen演示顯示了問題和可能的解決方案

調整窗口大小以查看兩個示例的響應方式。

修復過長的列

如果您的列太長，用戶將不得不不斷上下滾動以閱讀所有內容，這會很煩人。當列的高度大於視口高度本身時，最好去除多列。這可以使用媒體查詢再次實現：

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

在這種情況下，我僅在視口寬度允許用戶不再需要上下滾動時才使用多列。

查看具有多列和媒體查詢的演示

結論

我希望本CSS多列佈局模塊入門教程使您熟悉此功能。這些屬性可以很好地添加到您的響應式設計工具箱中，如果您仍然需要支持舊版瀏覽器，多列通常會優雅地降級為單列。

CSS多列佈局常見問題解答

如何在CSS中創建多列佈局？

在CSS中創建多列佈局非常簡單。您可以使用column-count屬性指定佈局中所需的列數。例如，如果您想要三列，您可以編寫：

.example {
  columns:  || 
}

在此示例中，.container是您要分成列的元素的類。 column-count屬性將自動將元素的內容分成指定的列數。

如何在CSS中控制列之間的間距？

column-gap屬性允許您控制列之間的空間。您為此屬性設置的值將是間隙的寬度。例如，如果您希望列之間有20px的間隙，您可以編寫：

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

我可以在CSS中創建不同寬度的列嗎？

不幸的是，CSS多列佈局模塊不支持不同寬度的列。使用column-count屬性創建的所有列都將具有相同的寬度。但是，您可以使用其他CSS技術（如Flexbox或Grid）創建不同寬度的列。

如何在CSS中控制列寬？

您可以使用column-width屬性控制列寬。此屬性指定列的最佳寬度，但瀏覽器如有必要會調整寬度以適應內容。例如，要將列寬設置為200px，您可以編寫：

.example {
  column-rule:  ||  || 
}

如何在CSS中創建列規則？

column-rule屬性允許您在列之間創建規則或線條。您可以指定規則的寬度、樣式和顏色。例如，要創建1px實心黑色規則，您可以編寫：

.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}

如何在CSS中控制列中斷？

break-inside屬性允許您控制列中斷。您可以將此屬性設置為avoid以防止元素內出現中斷。例如：

@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}

我可以將多列佈局與響應式設計一起使用嗎？

是的，您可以將多列佈局與響應式設計一起使用。您可以使用媒體查詢根據視口寬度調整列數。例如，您可能希望在小屏幕上顯示一列，在大屏幕上顯示三列。

如何在CSS中填充列？

默認情況下，列按順序填充。這意味著首先填充第一列，然後是第二列，依此類推。但是，您可以使用column-fill屬性更改此行為。如果將此屬性設置為balance，瀏覽器將嘗試均勻填充列。

如何跨越列？

column-span屬性允許元素跨越多列。您可以將此屬性設置為all以使元素跨越所有列。例如：

.container {
  column-count: 3;
}

CSS多列佈局是否存在任何瀏覽器兼容性問題？

大多數現代瀏覽器都支持CSS多列佈局，但實現方式可能存在一些差異。最好在不同的瀏覽器中測試您的佈局，以確保其按預期工作。您還可以使用Can I Use等工具來檢查不同CSS屬性的瀏覽器支持情況。

以上是初學者的CSS多列佈局教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！