如何在网格布局中订购和对齐项目

本教程演示了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中文网其他相关文章！