如何在網格佈局中訂購和對齊項目

本教程演示了CSS網格佈局中控制項目的放置和對齊方式。我們將探索訂購項目並單獨對齊，並作為一個組。 以前，我們介紹了網格佈局基礎知識，包括元素放置和網格自動置換算法。

>要進行最佳演示，請使用最新版本的Firefox（版本52或更高版本）或Chrome（版本57或更高版本），均提供本機網格佈局支持。

密鑰概念：

屬性指示網格中的項目序列，覆蓋默認的DOM順序。這對於眾多或動態添加的項目特別有用。

>
• >行軸對齊使用order（單個項目）和
（所有項目）。
• 對齊一個項目； justify-self將網格中的所有項目對齊。 justify-items justify-self列軸對齊使用justify-items（單個項目）和
（所有項目）。兩者都接受
• ，align-self，align-items和startvalues。 end>總體網格對齊由應用於網格容器的center（行軸）和stretch（列軸）控制。 這些接受
，
• ，justify-content，align-content，start，end，center，stretch和space-around。 space-between space-evenly
>用

控制項目順序：

> order屬性指定項目位置序列。 默認情況下，項目遵循其DOM順序。 但是，

允許自定義安排，特別有益於許多或動態的項目。

較低的order值首先出現；值相等order值的項目保持其DOM順序。

order>示例：order

html：

> css（說明性片段）：

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div>

.c { grid-row-start: 1; grid-row-end: 2; }
.e { grid-row-start: 1; grid-row-end: 3; }
.b, .j { order: 2; }
.a, .i { order: 3; }

>記住：使用

>更改項目順序可能會影響可訪問性。 屏幕讀取器和鍵盤導航可能無法反映視覺上的更改。

> row-axis對齊（order，

）：

justify-selfjustify-items

justify-self>對齊單個項目，而justify-items將所有項目對齊沿行軸。兩者都使用start，end，center和stretch。

列軸對齊（，align-self）：align-items

>對齊單個項目，align-self>使用align-items，start，end，center和stretch。

總體網格對齊（justify-content，align-content）：

justify-content（行軸）和align-content（列軸）將整個網格對齊其容器內。 除了start，end，center和stretch之外，他們還接受space-around>，space-between>。 space-evenly

結論：

CSS網格中的掌握項目排序和對齊方式提供精確的佈局控件。 請記住重新排序項目時可訪問性注意事項。 >

（為簡潔而刪除了常見問題部分。提供的常見問題已經在重寫的教程中覆蓋了。

以上是如何在網格佈局中訂購和對齊項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！