首頁 >科技週邊 >IT業界 >如何在網格佈局中訂購和對齊項目

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

Christopher Nolan原創: 2025-02-17 09:24:11266瀏覽

How to Order and Align Items in Grid Layout

本教程演示了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（說明性片段）：

<code class="language-html"><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></code>

<code class="language-css">.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; }</code>

>記住：使用

>更改項目順序可能會影響可訪問性。屏幕讀取器和鍵盤導航可能無法反映視覺上的更改。 How to Order and Align Items in Grid Layout