。 寬度：48％； 浮子：左； 邊緣權(quán)利：1％； } /* 移動(dòng)的 */ @Media僅屏幕和（最大寬度：480px）{ 。 寬度：100％； } }

但是，在較小的屏幕上，垂直錯(cuò)位變得顯而易見。雖然固定寬度，但使用媒體查詢的基于像素的CSS解決方案可以強(qiáng)制對(duì)齊，但這種方法缺乏靈活性，并且依賴于與特定內(nèi)容相關(guān)的“魔法數(shù)”：

 /* 移動(dòng)的 */
@Media僅屏幕和（最大寬度：480px）{
  傳奇 {
    寬度：160px;
  }
  按鈕 {
    寬度：130px;
  }
}

這種不靈活的性能，再加上對(duì)媒體查詢的依賴（我的目的是最小化），因此需要一個(gè)更適合適應(yīng)性的解決方案。理想的解決方案應(yīng)允許按鈕和標(biāo)簽響應(yīng)：

1. 可用空間
2. 內(nèi)容維度
3. 周圍元素

媒體查詢不足，因?yàn)樗麄儾豢紤]周圍空間，如海頓·皮克林（Heydon Pickering）的“ flexbox holy baratross”所示。所需的行為是第二??個(gè)<fieldset></fieldset>僅當(dāng)兩個(gè)字段集不再適合單行時(shí)，才包裝。

Flexbox和網(wǎng)格：初始嘗試

Flexbox，其flex-wrap: wrap屬性，提供了提高的柔韌性，從而使元素可以流向多條線。但是，對(duì)于完美的垂直對(duì)齊，通常仍然需要一個(gè)min-width 。

CSS網(wǎng)格專為布局管理而設(shè)計(jì)，為無媒體查詢的多線布局提供了auto-fit和auto-fill關(guān)鍵字（在repeat()中）。使用auto-fit ，我們實(shí)現(xiàn)了：

 。
  顯示：網(wǎng)格；
  網(wǎng)格 - 板柱：重復(fù)（自動(dòng)擬合，450px）;
  網(wǎng)格間隙：10px;
}

但是，最佳對(duì)齊仍然可能需要絕對(duì)寬度值。使用fr單元或minmax()靈活網(wǎng)格軌道可提供進(jìn)一步的改進(jìn)，但是出現(xiàn)限制，因?yàn)橹挥兄苯拥木W(wǎng)格容器的直接兒童才被視為網(wǎng)格項(xiàng)目。

亞網(wǎng)格解決方案

CSS網(wǎng)格級(jí)別2引入了subgrid ，從而使嵌套的網(wǎng)格從其父母那里繼承了軌道尺寸。這解決了獨(dú)立嵌套網(wǎng)格的問題。子網(wǎng)格允許兒童網(wǎng)格中的元素響應(yīng)兄弟姐妹網(wǎng)格中的內(nèi)容。

對(duì)于我們的按鈕示例，使用auto-fill和minmax()定義父網(wǎng)格：

 。
  顯示：網(wǎng)格；
  網(wǎng)格 - 板柱：重復(fù)（自動(dòng)填充，minmax（150px，1fr））;
  網(wǎng)格間隙：10px;
}

兒童網(wǎng)格使用subgrid繼承父母的列軌道：

 .sub-Grid {
  顯示：網(wǎng)格；
  網(wǎng)格列：跨度3；
  網(wǎng)格板柱：子格里德；
  準(zhǔn)項(xiàng)目：中心；
}

這確保了一致的對(duì)齊和響應(yīng)行為。按鈕和標(biāo)簽適合可用空間，僅在必要時(shí)才包裹在新線路上。

瀏覽器兼容性和進(jìn)一步閱讀

亞網(wǎng)格瀏覽器支持目前受到限制（主要是Firefox）。 CSS功能查詢可以為其他瀏覽器提供后備。有關(guān)詳細(xì)的瀏覽器兼容性信息，請(qǐng)參閱Caniuse.com。有關(guān)此主題的進(jìn)一步閱讀包括Miriam Suzanne，Rachel Andrew和Heydon Pickering的文章（原始文章中提供的鏈接）。對(duì)于處理涉及形式元素，網(wǎng)格和flexbox的錯(cuò)誤，可能需要在野外圍繞的包裝器。可以將FieldSet的display屬性設(shè)置為contents以解決此問題。

以上是實(shí)現(xiàn)垂直對(duì)齊（謝謝，subgrid?。┑脑敿?xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！