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

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

規(guī)範(fàn)差距

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

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

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

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

>可讀性和滾動問題

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

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

>

快速審查屬性和值

>

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

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

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

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

和視口單元，高級選擇器，例如

>，容器查詢，媒體查詢，響應(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)建一個靈活的，無媒體的文章佈局，以適應(yīng)屏幕尺寸以及存在/不存在

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

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

。

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

（100CH）和自動餘量：

<main><h1>About Patty</h1>
<p>…</p></main><img  alt="重新訪問CSS多列佈局" >

flexbox僅在包含一個<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;
}

>這消除了對媒體查詢的需求。 文本大小使用容器查詢（<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)>

解決過去的限制

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

。

對多列佈局的更新視角break-after: column;

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

>

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