摘要：示例鏈接核心代碼要知道，目前的規(guī)范，的取值只有或者。最近，片段模塊規(guī)范定義了如何為各種片段模塊上下文設(shè)計(jì)的碎片化的屬性，規(guī)范包括，和處于停滯狀態(tài)的區(qū)域樣式區(qū)域也會(huì)支持展示被分解碎片化連續(xù)的內(nèi)容。

原文：When And How To Use CSS Multi-Column Layout
作者：Rachel Andrew
譯者：博軒

當(dāng)我們把注意力都放在 CSS Grid 布局和 CSS Flexbox 布局的時(shí)候，經(jīng)常忽略了另一種布局方法。在本文中，我將介紹多列布局 - 通常稱為 multicol 或者 “CSS Columns” 。通過(guò)這篇文章，你了解到使用 columns 的最佳實(shí)踐，以及一些使用 columns 的注意事項(xiàng)。

multicol 的基本思想是，你可以把一大塊內(nèi)容帶到多個(gè)列中，就像報(bào)紙一樣。您可以使用兩個(gè)屬性中的其中一個(gè)來(lái)完成此操作。您可以使用 cloumn-count 屬性來(lái)指定內(nèi)容的列數(shù)。還可以使用 column-width 屬性來(lái)指定理想的列寬，讓瀏覽器來(lái)決定合適的列數(shù)。

不論你的內(nèi)容包含什么樣的元素，當(dāng)你將它轉(zhuǎn)換為多列布局時(shí)，一切都將保持正常的內(nèi)容流，但是將以列的形式展現(xiàn)。這使得 multicol 布局與如今在瀏覽器中常見(jiàn)的其他布局會(huì)有所不同。例如 Flexbox 和 Grid，獲取容器元素中子元素，讓這些子元素參與到 flex 和 grid 的布局中來(lái)。使用 multicol ，在每一列的內(nèi)部，您還可以獲得正常的內(nèi)容流。

在下面的例子中，我們正在使用 column-width，最小列寬為 14em 。Multicol 會(huì)盡可能多的分配寬度為 14em 的列，然后，讓每一列分享剩余的空間。每一列的寬度至少 14em ，除非，容器的寬度小于 14em ，那么將只展示一列。multicol 也是 CSS 中首次出現(xiàn)的一種行為，可以創(chuàng)建出列，同時(shí)也默認(rèn)符合響應(yīng)式的規(guī)則。您不必增加 CSS 查詢條件 (Media Queries) ，修改每一個(gè)斷點(diǎn)的列數(shù)，而是制定一個(gè)最佳的寬度，讓瀏覽器自身來(lái)進(jìn)行處理。

示例鏈接

// 核心代碼摘錄
.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
}

當(dāng)你使用列屬性（columns）來(lái)創(chuàng)建布局的時(shí)候，cloumns box 中的內(nèi)容將無(wú)法定位。您無(wú)法使用 JavaScript 來(lái)進(jìn)行定位，您也無(wú)法為單個(gè)列來(lái)指定唯一的樣式，比如背景顏色，外邊距，內(nèi)邊距等等。所有 column boxes 將保持相同的大小。你唯一可以做的事情，就是使用 column-rule 屬性來(lái)添加列之間的規(guī)則，該屬性的作用類似于 border。您還可以使用 column-gap 屬性控制列之間的間隙，該屬性的默認(rèn)值為 1em ，但是您還可以將其改為任何有效的長(zhǎng)度單位。

示例鏈接

// 核心代碼
.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

這是 multicol 的基本功能。您可以將一大塊內(nèi)容拆分為列。內(nèi)容將依次填充到每一列，并在內(nèi)聯(lián)的方向創(chuàng)建這些列。您可以控制列之間的間隙以及規(guī)則，使用與 border 相同的取值即可。到目前為止，上述所有內(nèi)容在瀏覽器中得到了很好的支持，并且已經(jīng)存在了很長(zhǎng)時(shí)間，使得這個(gè)規(guī)范在向后兼容性方面非常安全。

您可能需要考慮使用列的其他一些事項(xiàng)，以及在Web上使用列時(shí)需要注意的一些潛在問(wèn)題。

有時(shí)候，您可能希望將某些內(nèi)容分解為列的同時(shí)，使用一個(gè)元素跨越這些列。將 columns-span 屬性用于 multicol 可以實(shí)現(xiàn)這一點(diǎn)。

下面的示例中，我使用一個(gè)

元素來(lái)跨越列。請(qǐng)注意，在執(zhí)行此操作時(shí)，內(nèi)容會(huì)被分為兩個(gè)區(qū)域，分別位于設(shè)置了 column-span 元素的上下兩個(gè)部分。內(nèi)容不會(huì)跳過(guò)設(shè)置了 column-span 的元素。

column-span 屬性目前已在 Firefox 中實(shí)現(xiàn)，并且向后兼容。

示例鏈接

// 核心代碼
blockquote {
  font: 2em "Berkshire Swash", cursive;
  margin: 0;
  column-span: all;
  text-align: center;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

要知道，目前的規(guī)范，column-span 的取值只有 all 或者 none。如果你想實(shí)現(xiàn)報(bào)紙中的樣式，可以使用多列布局結(jié)合其他布局來(lái)實(shí)現(xiàn)。在下面的示例中，我們實(shí)現(xiàn)了一個(gè)帶有兩個(gè)列軌道的網(wǎng)格容器（Grid）。左邊軌道的寬度是 2fr，右邊軌道的寬度是 1fr。我們將左邊的軌道變成了一個(gè)具有兩欄的 multicol 容器。它同樣包含了一個(gè)跨欄元素。

在右邊，我們將內(nèi)容放入第二個(gè) Grid 列軌道中。通過(guò)嘗試各種布局方法，我們可以確切地找出適合手頭工作的布局方法 - 不要害怕混合搭配！

示例鏈接

// 核心代碼
.container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}

.container article {
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

.container aside {
  border-left: 1px solid #ccc;
  padding: 0 1em;
}

控制內(nèi)容截?cái)?/b>

如果您的內(nèi)容中包含標(biāo)題，您可能希望避免標(biāo)題出現(xiàn)在列的末端，而內(nèi)容卻出現(xiàn)在了下一列中。再比如，您的內(nèi)容中有一些帶有文字說(shuō)明的圖片，那么理想的情況下，圖片和他的文字說(shuō)明，將保持一個(gè)整體展示，而不會(huì)被跨列分割。

當(dāng)您將內(nèi)容拆分為列時(shí)，這種行為被稱為CSS片段模塊(Fragmentation) 。將內(nèi)容分割成兩頁(yè)進(jìn)行展示，就好像打印機(jī)選擇兩欄的打印模式一樣。因此，相比較Web上的其他布局方法，multicol 是最接近Paged Media 的布局方法。因此，我們可以使用屬于CSS2.1 的屬性 page-break 來(lái)實(shí)現(xiàn)這一點(diǎn)。

page-break-before

page-break-after

page-break-inside

最近，CSS片段模塊規(guī)范定義了如何為各種片段模塊上下文設(shè)計(jì)的碎片化的屬性，規(guī)范包括 Paged Media，multicol 和處于停滯狀態(tài)的區(qū)域樣式(Region Styling); 區(qū)域也會(huì)支持展示被分解（碎片化）連續(xù)的內(nèi)容。通過(guò)使用這些通用屬性，它們可以應(yīng)用于任何未來(lái)的CSS片段模塊上下文，就像 Flexbox 的對(duì)齊屬性被移動(dòng)到 Box Alignment 規(guī)范中一樣，以便它們可以在 Grid 和 Block 布局中使用。

break-before

break-after

break-inside

下面的示例中，我在

元素中使用 break-inside avoid 屬性，防止圖像的標(biāo)題和圖像分離。支持該屬性的瀏覽器中，我們應(yīng)該可以看到聯(lián)合在一起的效果，即使這會(huì)導(dǎo)致列中的內(nèi)容看起來(lái)不平衡。

示例鏈接

// 核心代碼

figure {
  margin: 0;
  break-inside: avoid;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
}

不幸的是，在 multicol 中對(duì)這些屬性的支持非常不完整。即使在支持的情況下，它們也應(yīng)該被視為一個(gè)建議，因?yàn)樵趯?shí)際使用的時(shí)候，會(huì)提出很多要求來(lái)控制內(nèi)容是否應(yīng)該被分離，但是實(shí)際上瀏覽器并不會(huì)真正讓這些內(nèi)容分離。在上面的示例中，我們定義了展示的優(yōu)先級(jí)，但是當(dāng)您在使用的時(shí)候還是要謹(jǐn)慎一些，僅在最需要的地方使用。

Columns 布局的一些問(wèn)題

我們?cè)跒g覽網(wǎng)頁(yè)時(shí)，并沒(méi)有看到 multicol 被廣泛的使用，其原因是讀者的閱讀習(xí)慣，通常是自頂向下滾動(dòng)閱讀的。對(duì)于使用英語(yǔ)，或其他垂直寫(xiě)作的人來(lái)說(shuō)，橫向的布局并不是很好的閱讀體驗(yàn)。

如果你固定容器的高度，例如使用 viewport 單位 vh，當(dāng)內(nèi)容過(guò)多時(shí)，它會(huì)在內(nèi)聯(lián)方向溢出，同時(shí)，你會(huì)得到一個(gè)橫向的滾動(dòng)條。

示例鏈接

這些情況都不是很理想。所以，在使用多列布局的時(shí)候，我們需要仔細(xì)的考慮每一欄的內(nèi)容量。

Columns 塊溢出

在 Level 2 的規(guī)范當(dāng)中，我們考慮如何使用一種方法，列的內(nèi)容不會(huì)溢出，生成橫向的滾動(dòng)條，而是在塊的方向上面生成新的列。這意味著您可以擁有一個(gè)具有高度的 multicol 容器，并且一旦內(nèi)容超出了該容器的寬度，就會(huì)在下面創(chuàng)建一組新的列。這看起來(lái)有點(diǎn)像我們上面的跨越示例，但是，不是讓設(shè)置了column-span的元素導(dǎo)致新的列框開(kāi)始，而是由塊大小限制的容器寬度，從而解決溢出的問(wèn)題。

此功能將使 multicol 對(duì)Web更有用。雖然我們現(xiàn)在還有一段距離，但您可以關(guān)注CSS工作組回購(gòu)中的問(wèn)題。如果您有此功能的其他用例，請(qǐng)發(fā)布它們，它在設(shè)計(jì)新功能時(shí)非常有用。

今天，我們?cè)撊绾问褂?Multicol ?

使用當(dāng)前規(guī)范，不建議將所有內(nèi)容拆分為列而不考慮滾動(dòng)問(wèn)題。但是，在某些情況下，multicol 對(duì)于 web 是理想的。在查看設(shè)計(jì)模式時(shí)，有足夠的示例k可供你參考。

折疊小UI或文本元素

multicol 可以在任何需要占用較少空間的項(xiàng)目列表的地方使用。例如，復(fù)選框的簡(jiǎn)單列表或名稱列表。通常在這些情況下，訪問(wèn)者不會(huì)讀取一列然后返回到下一列的頂部，而是掃描內(nèi)容以選中要單擊的復(fù)選框或要選擇的項(xiàng)目。即使您確實(shí)創(chuàng)建了滾動(dòng)體驗(yàn)，這個(gè)問(wèn)題也依然存在。

您可以在 DonarMuseum網(wǎng)站 上看到 Sander de Jong以這種方式使用的 multicol 示例。

確認(rèn)的少量?jī)?nèi)容

有時(shí)，我們?cè)O(shè)計(jì)一個(gè)網(wǎng)站，我們知道某些內(nèi)容區(qū)域相對(duì)較小，并且適合大多數(shù)屏幕展示，且不需要滾動(dòng)。我在 Notist演示頁(yè)面 使用了 multicol ，用于介紹演講。

Andy Clarke為 Equfund網(wǎng)站設(shè)計(jì)了一個(gè)可愛(ài)的例子。

為了避免非常小的屏幕導(dǎo)致頁(yè)面出現(xiàn)滾動(dòng)，就像寬度一樣，您可以使用媒體查詢來(lái)檢查高度。對(duì)于超出最小高度的內(nèi)容，您可以在斷點(diǎn)處設(shè)置 min-height ，來(lái)避免用戶使用較小設(shè)備時(shí)所帶來(lái)的較差體驗(yàn)。

瀑布流（MASONRY-LIKE）的內(nèi)容顯示

多列布局工作得很漂亮的另一個(gè)地方是，如果要?jiǎng)?chuàng)建瀑布流的內(nèi)容顯示。Multicol 是目前唯一一種，可以創(chuàng)建不定高度的布局方法。Grid 布局要么會(huì)留下間隙，要么拉伸項(xiàng)目以形成嚴(yán)格的二維網(wǎng)格。

Veerle Pieters 有一個(gè)很好的例子，就是在她的靈感頁(yè)面上以這種方式使用multicol 。

Grid 和 Flexbox 的備選方案

這些 column- 屬性還可以用作 Grid 和 Flex 布局的備選方案。如果在容器上指定其中一個(gè)屬性，則使用 display: flex 或 display: grid 將刪除任何列行為，將該容器轉(zhuǎn)換為 Flex 或 Grid 布局。例如，如果你有一個(gè)使用 Grid 布局的卡片布局，如果它在列中而不是在頁(yè)面上運(yùn)行，那么布局就是可讀的，你可以使用 multicol 作為簡(jiǎn)單的后備。不支持 Grid 的瀏覽器將獲得 multicol 顯示，支持 Grid 的瀏覽器將獲得 Grid Layout。

別忘了Multicol！

我經(jīng)?；卮?Grid 和 Flexbox 的問(wèn)題，答案是不使用 Grid 或 Flexbox ，而是試試 Multicol。您可能不會(huì)在每個(gè)站點(diǎn)上使用它，但是當(dāng)您遇到本文中提到的場(chǎng)景時(shí)，它可能非常有用。在MDN上有關(guān)于 multicol和CSS片段模塊的有用資源。

如果您在項(xiàng)目中有 multicol的其他使用場(chǎng)景，也歡迎留言分享！

本文已經(jīng)聯(lián)系原文作者，并授權(quán)翻譯，轉(zhuǎn)載請(qǐng)保留原文鏈接