自從我的第一本書《超越CSS

）探索了當(dāng)時(shí)的新聞多柱布局模塊以來(lái)，已經(jīng)過(guò)去了近二十年。 更新的，可自由使用的在線版本，超越CSS的重新訪問(wèn)，提供了當(dāng)代的觀點(diǎn)。我的印刷背景很可能激發(fā)了我對(duì)此CSS功能的最初熱情，從而使柱狀內(nèi)容無(wú)需多余標(biāo)記。 盡管在我的工作中使用了持續(xù)的使用，但CSS列仍然令人驚訝的是未被充分利用。 為什么？

規(guī)范差距

多列布局長(zhǎng)期以來(lái)一直遭受并繼續(xù)存在重大局限性。 正如雷切爾·安德魯（Rachel Andrew）（現(xiàn)在是規(guī)格編輯者）在五年前強(qiáng)調(diào)的那樣：不可能直接造型。 JavaScript操縱或?qū)Ρ尘?，填充和邊緣的調(diào)整不可用；并且所有柱保持均勻尺寸。 只有列規(guī)則提供樣式選項(xiàng)。

這仍然是正確的。 選擇性樣式，例如使用

的交替背景顏色，是不可能的。雖然列規(guī)則允許變化（虛線，虛線，固體，凹槽，山脊），但鑒于他們的近乎相似的引入，缺乏

支持令人困惑。 這些缺陷存在，但它們并沒(méi)有完全解釋這種有價(jià)值工具的廣泛忽視。 :nth-column()歷史瀏覽器不一致border-style border-image較舊的瀏覽器通常會(huì)忽略不支持的列屬性。 但是，多列布局的早期采用與跨瀏覽器一致性并不是許多開發(fā)人員關(guān)注的時(shí)期。 雖然最初的瀏覽器支持不一致，尤其是關(guān)于內(nèi)容中斷，但現(xiàn)代瀏覽器現(xiàn)在提供了廣泛的兼容性。然而，我與之交談的開發(fā)人員之間對(duì)CSS列的感知仍然存在。 盡管需要改進(jìn)，但這不應(yīng)阻礙其當(dāng)前功能性方面的使用。>

>可讀性和滾動(dòng)問(wèn)題

多柱布局的缺乏實(shí)用性可能不是源于規(guī)范缺陷或?qū)嵤﹩?wèn)題，而是源于可用性挑戰(zhàn)。雷切爾·安德魯（Rachel Andrew）正確地指出了由于長(zhǎng)期含量過(guò)多的垂直滾動(dòng)而導(dǎo)致可讀性差的潛力。 毫無(wú)疑問(wèn)，這是一種負(fù)面的閱讀體驗(yàn)。

仔細(xì)考慮至關(guān)重要，但這不應(yīng)該是威懾。 真正的罪魁禍?zhǔn)资窃愀獾脑O(shè)計(jì)選擇，例如不適當(dāng)?shù)貙⒘袘?yīng)用于沒(méi)有結(jié)構(gòu)元素的大量文本。 標(biāo)題，圖像和引號(hào)可以有效地跨越列，從而提高可讀性。 結(jié)合容器查詢和現(xiàn)代文本尺寸單元，幾乎沒(méi)有理由避免多列布局。

>

快速審查屬性和值

>

>創(chuàng)建列存在兩個(gè)主要方法：指定column-count或定義column-width，讓瀏覽器確定列計(jì)數(shù)。 我更喜歡column-width，設(shè)置一個(gè)寬度（例如18rem），并讓瀏覽器優(yōu)化列的數(shù)量。

column-gap（溝口）控制列之間的間距，理想情況下，使用單元用于文本大小比例。 rem添加了可自定義厚度和column-rule的視覺分離。 這種簡(jiǎn)單的語(yǔ)法有助于其易用性。 border-style在現(xiàn)代CSS

中增強(qiáng)了相關(guān)性 在超越CSS

超越CSS的時(shí)候，許多現(xiàn)代CSS功能都不存在：

和視口單元，高級(jí)選擇器，例如

>，容器查詢，媒體查詢，響應(yīng)式設(shè)計(jì)的媒體查詢，，，rem，:has()，CSS GRID GRID和FLEXBOX。 這些進(jìn)步增強(qiáng)了多列布局的功能。calc() clamp()

和視口單元，再加上

>和rem，在列內(nèi)啟用響應(yīng)式文本尺寸。 calc()>允許根據(jù)內(nèi)容創(chuàng)建有條件的列。 僅當(dāng)有足夠的容器空間可用時(shí)，容器查詢才能實(shí)現(xiàn)列。 與CSS網(wǎng)格或Flexbox集成更具創(chuàng)意的布局。clamp()> :has()實(shí)用應(yīng)用：響應(yīng)迅速的文章布局

>我的挑戰(zhàn)是創(chuàng)建一個(gè)靈活的，無(wú)媒體的文章布局，以適應(yīng)屏幕尺寸以及存在/不存在

>。 柱狀文本可提高可讀性，文本大小調(diào)整到容器寬度，而不是視口寬度。

html很簡(jiǎn)單：a<figure></figure>元素，包含標(biāo)題和段落，以及可選的是

。

<main></main>>多列布局樣式用于使用<figure></figure>（40CH），

（100CH）和自動(dòng)余量：

<main><h1>About Patty</h1>
<p>…</p></main><img  alt="重新訪問(wèn)CSS多列布局" >

flexbox僅在包含一個(gè)<main></main>> column-width的情況下應(yīng)用于max-width>

在

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

>這消除了對(duì)媒體查詢的需求。 文本大小使用容器查詢（<section></section>）和<figure></figure>適應(yīng)響應(yīng)縮放：

>

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

結(jié)果是一種靈活的布局，可適應(yīng)屏幕尺寸和內(nèi)容，并有效地利用多列布局。min-width: min(100%, 30rem)>

解決過(guò)去的限制

>許多文章突出顯示了多列布局的缺陷，尤其是滾動(dòng)問(wèn)題。 column-span屬性（對(duì)于標(biāo)題，圖像，引號(hào)跨度列）會(huì)大大減輕此功能，并仔細(xì)的內(nèi)容設(shè)計(jì)以最大程度地減少滾動(dòng)。 使用

。

對(duì)多列布局的更新視角break-after: column;

盡管年齡和過(guò)去的局限性，多列布局仍未得到充分利用。盡管存在挑戰(zhàn)，但其增強(qiáng)設(shè)計(jì)的價(jià)值和能力仍然存在。 現(xiàn)在是時(shí)候仔細(xì)查看這種功能強(qiáng)大的CSS工具了。

>

以上是重新訪問(wèn)CSS多列布局的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！