web布局15

CSS 网格布局除了提供定义网格和放置网格项目的相关属性之外，也提供了一些控制对齐方式的属性。这些控制对齐方式的属性，和 Flexbox 布局中的对齐属性 justify-* 、align-* 、*-items 、*-content 、 *-self 等是相似的：

img

在网格布局中可以用它们来控制网格项目在内联轴（Inline Axis）和块轴（Block Axis）的对齐方式；也可以用来控制网格轨道在内联轴（Inline Axis）和块轴（Block Axis）的对齐方式。

接下来，在这节课程中，我将演示网格布局中的对齐方式是如何工作的，你会发现很多属性和值与 Flexbox 布局中的用法是类似的（Flexbox 布局对齐方式请参阅读前面课程：《04 | Flexbox 布局中的对齐方式 》）。不过，网格布局是二维的，Flexbox 布局是一维的，所以你也会发现它们有一些小区别。我们就从处理网格对齐时用到的两条轴线开始吧。

网格布局中的轴线

对于大多数开发者来说，他们都知道 Web 有两根轴线：水平方向的 x 轴和垂直方向的 y 轴。只不过，在 Flexbox 布局中，不再称 x 轴和 y 轴了，它由 Flexbox 中的主轴（Main Axis）和侧轴（Cross Axis）替代了，并且 Flexbox 的主轴不再绝对的是 x 轴，侧轴也不再绝对的是 y 轴，它由 flex-direction 属性的值来决定：

img

由于网格布局是唯一的二维布局，因此，网格布局中也有两条轴线，这两条轴线既不称为水平的 x 轴和垂直方向的 y 轴，也不像 Flexbox 布局中称为主轴和侧轴。它们有着新命名的两条轴线，即内联轴（Inline Axis）和块轴（Block Axis）：

  • 内联轴（Inline Axis） ：主要定义网站的文本流方向，也就是文本的阅读方式，CSS 的 direction 或 HTML 的 dir 会影响内联轴的方向。
  • 块轴（Block Axis） ：主要定义网站文档（元素块）流，CSS 的书写模式 writing-mode 会影响块轴的方向。

即，内联轴和块轴会受 CSS 的 direction 、writing-mode 和 HTML 的 dir 属性值的影响，这个有点类似于 Flexbox 布局的主轴和侧轴，不是固定不变的：

img

网格布局中的内联轴（Inline Axis）和块轴（Block Axis）可以和网格中的行与列相映射，比如书写模式和阅读模式是 ltr（Left-To-Right）时，内联轴也称为行轴（Row Axis），块轴也称为列轴（Column Axis）：

img

需要注意的是，虽然内联轴（Inline Axis）和块轴（Block Axis）会因 CSS 的书写模式或文档的阅读模式改变，但网格中的行轴和列轴是始终不变的：

img

网格布局中，你就可以沿着这两条轴线来控制网格项目或网格轨道的对齐方式。

特别声明，如无特别指出，我们都以书写模式和阅读模式是 ltr （Left-To-Right）为例，即可内联轴对应的是行轴，块轴对应的是列轴 。

网格布局中的对齐方式

在 Flexbox 布局中，可以在 Flex 容器的主轴和侧轴方向控制 Flex 项目的对齐方式。在 Grid 布局中，将按照内联轴和块轴两个方向来控制 网格轨道 和 网格项目 的对齐方式：

  • 控制“网格项目”沿块轴方向的对齐属性有： align-items 和 align-self ，其中 align-items 运用于网格容器上，align-self 运用于网格项目上。
  • 控制“网格项目”沿内联轴方向的对齐属性有：justify-items 和 justify-self ，其中 justify-items 运用于网格容器上，justify-self 运用于网格项目上。
  • 控制“网格轨道”沿块轴方向对齐的属性有：align-content ，该属性运用于网格容器上。
  • 控制“网格轨道”沿内联轴方向对齐的属性有：justify-content ，该属性运用于网格容器上。

也可以按下面这样的方式来划分：

  • 对齐网格项目 ：justify-items 和 justify-self 沿着内联轴方向对齐网格项目，而align-items 和 align-self 沿着块轴方向对齐网格项目，其中 justify-items 和 align-items 被运用于网格容器，而 justify-self 和 align-self 被运用于网格项目。
  • 对齐网格轨道 ：align-content 沿着块联轴方向对齐网格轨道，justify-content 沿着内联轴方向对齐网格轨道，它们都被运用于网格容器。

我们先来看网格项目的对齐。

网格项目对齐

控制网格项目的对齐方式的属性主要有:

  • justify-items 和 justify-self 控制网格项目沿着内联轴（文本书写方向的行轴）方向对齐；
  • align-items 和 align-self 控制网格项目沿着块轴（块方向的列轴）方向的对齐。

这几个属性都可以接受 auto 、normal 、start 、end 、center 、stretch 、 baseline 、first baseline 和 last baseline 值，但常用的值只有 start 、end 、center 和 stretch （默认值）。其中 start 、center 和 end 表示相应轴的起点位置，中心位置和终点位置：

img

注意，这几个属性都是用来控制网格项目在所处网格区域内的内联轴或块轴方向的对齐，如果没有跨网格单元格，则在对应的网格单元格内的内联轴或块轴方向的对齐。

假设你有下面这样的一个网格：

<div class="container"><div class="item"></div><!-- 此处省略四个 item --><div class="item"></div>
</div>
.container {display: grid;gap: 1rem;grid-template-columns: repeat(8, 1fr);grid-auto-rows: 80px;grid-auto-columns: 80px;grid-template-areas:"a a a a b b b b""a a a a b b b b""c c c c d d d d""c c c c d d d d";
}.item:nth-child(1) {grid-area: a;
}.item:nth-child(2) {grid-area: b;
}.item:nth-child(3) {grid-area: c;
}.item:nth-child(4) {grid-area: d;
}.item:nth-child(5) {grid-row: 1 / -1;grid-column: span 2;
}

上面的代码构建了一个四行十列（4 x 10）的隐式网格，并且使用 grid-area 分别将网格项目放置到指定的网格区域：

  • 网格项目一放置在网格区域 a ；
  • 网格项目二放置在网格区域 b ；
  • 网格项目三放置在网格区域 c ；
  • 网格项目四放置在网格区域 d 。

使用 grid-row 和 grid-column 将网格项目五放置指定的区域内（合并四行两列），相当于放置在 grid-area: 1 / 9 / 5 ``/`` 11 区域内：

img

你可以在网格容器上显式设置 align-items 属性的值，比如：

.container {align-items: var(--align-items, stretch);
}

img

正如上图所示：

  • start 将网格项目和所处网格区域在块轴的起始位置重叠；
  • end 将网格项目和所处网格区域在块轴的结束位置重叠；
  • center 将网格项目和所处网格区域在块轴中心位置重叠（类似垂直居中）；
  • stretch 将网格项目拉伸与所处网格区域高度相同，相当于与网格区域的块轴方向起始、结束位置同时重叠（类似垂直方向的拉伸）。

另外，align-items 取值为 auto 、normal 和 last baseline 值时，与取值 stretch 值效果等同；baseline 和 first baseline 的效果与 start 等同：

img

Demo 地址：https://codepen.io/airen/full/zYavJow

一旦在网格容器上设置了 align-items 的值是 stretch 的其他值之后，所有网格项目的高度（块轴方向尺寸，block-size）都将会由其内容的高度决定。另外，在网格容器上显式设置了 align-items 的值，就相当于在所有网格项目上设置了 align-self 的值。比如：

.container {align-items: var(--align-items, stretch);
}/* 等同于 */
.container > * {align-self: var(--align-items, stretch)；
}

当然，你也可以在单个网格项目上显式设置 align-self 的值：

.item:nth-child(1) {align-self: start;
}.item:nth-child(2) {align-self: end;
}.item:nth-child(3) {align-self: center;
}

img

Demo 地址： https://codepen.io/airen/full/VwdvELO

你可以同时显式设置网格容器的 align-items 和单个网格项目的 align-self 的值，只不过最终由网格项目上的 align-self 值来决定（没有显式设置 align-self 的网格项目则由 align-items 决定）。比如：

.container {align-items: var(--align-items, stretch);
}.item:nth-child(1) {align-self: center;
}

上面这个示例，网格项目一在块轴方向始终是是垂直居中的，因为它显式设置了 align-self 的值为 center ，其他网格项目在块轴的对齐方式则由网格容器上的 align-items 属性的值来决定：

img

Demo 地址： https://codepen.io/airen/full/NWzGOpp

与 align-items 和 align-self 相似的是，你可以在网格容器上设置 justify-items 属性和在网格项目上设置 justify-self 属性，控制网格项目在内联轴的对齐方式。比如：

.container {justify-items: var(--justify-items, stretch);
}

img

正如上图所示：

  • start 将网格项目和所处网格区域在内联轴的起始位置重叠；
  • end 将网格项目和所处网格区域在内联轴的结束位置重叠；
  • center 将网格项目和所处网格区域在内联轴中心位置重叠（类似水平居中）；
  • stretch 将网格项目拉伸与所处网格区域宽度相同，相当于与网格区域的内联轴方向起始、结束位置同时重叠（类似水平方向的拉伸）。

同样的，justify-items 取值是 auto 、normal 和 last baseline 时与 stretch 值效果等同；baseline 和 first baseline 的效果与 start 等同：

img

Demo 地址： https://codepen.io/airen/full/gOKaBvw

和 align-items 一样，当你在网格容器上设置了 justify-items 时，就等同于在所有网格项目上设置了 justify-self ：

.container {justify-items: var(--justify-items, stretch);
}/* 等同于 */
.container > * {justify-self: var(--justify-items, stretch);
}

你也可以根据需要，在网格项目上单独设置 justify-self 属性的值，控制单独网格项目在内联轴方向的对齐：

.item:nth-child(1) {justify-self: start;
}.item:nth-child(2) {justify-self: center;
}.item:nth-child(3) {justify-self: end;
}

img

Demo 地址： https://codepen.io/airen/full/qBKOJLW

如果在网格容器上设置了 justify-items 属性的值，并且在网格项目上也显式设置了 justify-self 属性的值，那么最终网格项目在内联轴方向的对齐由 justity-self 属性的值来决定。比如：

.container {justify-items: var(--justify-items, stretch);
}.item:nth-child(1) {justify-self: center; 
}

img

Demo 地址： https://codepen.io/airen/full/RwJWeOG

你可能已经发现了，当 justify-items 或 justify-self 属性的值不是默认值 strecth 时，网格项目的宽度（内联轴方向的尺寸，inline-size）就会发生变化，与 auto 值相似。

在网格布局中，justify-items 和 align-items 还可能简写成 place-items ；justify-self 和 align-self 可以简写成 place-self ，即：

place-items: <align-items>  <justify-items>
place-self:  <align-self>  <justify-self>

当 place-items 和 place-self 只取一个值时，表示两个属性的值相同，否则第一个值用于 align-* ，第二个值则用于 justif-* ，比如：

.container {place-items: center end;/* 等同于 */align-items: center;justify-items: end;
}.item:nth-child(1) {place-self: center end;/* 等同于 */align-self: center;justify-self: end;
}

注意，justify-items 和 justify-self 两属性不能运用于 Flexbox 布局，主要是因为 Flexbox 布局是一个一维布局，在单个轴上有很多个元素（Flex 项目），无法单独对齐其中某一个元素（Flex 项目） 。

不知道你是否已经发现了，在 Web 布局中，又多了两种实现水平居中的布局技术。在网格布局中，你可以使用下面这两种技术，让某个元素（Grid 项目）水平垂直居中在另一个元素（网格区域）中：

<div class="container"><div class="item">我要水平垂直居中</div>
</div>
.container {display: grid;place-items: center;/* 等同于 */align-items: center;justify-items: center;
}.item {grid-area: 1 / 1 / -1 / -1;
}

img

Demo 地址： https://codepen.io/airen/full/YzvyRGN

上面这个示例效果，你还可以在网格项目上使用 place-self 来替代网格容器上的 place-items ：

.container {display: grid;
}.item {grid-area: 1 / 1 / -1 / -1;place-self: center;/* 等同于 */align-self: center;justify-self: center;
}

img

Demo 地址：https://codepen.io/airen/full/qBKbwKp

再次强调一下，justify-items 、align-items 、justify-self 和 align-self 都是用来控制网格项目自身所处网格区域的内联轴和块轴方向的对齐，如果网格项目没有明确放置，将按自动放置的算法来计算网格区域，一般就是网格单元格，因为网格单元格也是一个网格区域，网格中默认的最小网格区域：

.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-auto-rows: 120px;gap: 1rem;/* 设置所有网格项目在内联轴和块轴方向的对齐 */place-items: var(--align-items, stretch)  var(--justify-items, stretch)
}/* 只设置网格项目一在内联轴和块轴方向的对齐 */
.item:nth-child(1) {place-self: var(--align-self, stretch)  var(--justify-self, stretch)
}

img

Demo 地址：https://codepen.io/airen/full/xxzwQpV

用下面这张图来总结网格项目在内联轴和块轴上对齐方式的效果：

img

网格轨道对齐

CSS Grid 布局中的对齐方式和 Flexbox 布局中的对齐方式最大的不同之处是：

在网格布局中，除了可以控制网格项目在内联轴和块轴的方向对齐之外，还可以控制网格轨道在内联轴和块轴方向的对齐 。

在网格布局中，所有网格轨道尺寸所占据的空间可能会小于网格容器空间：

  • 内联轴方向 ：所有列网格轨道的尺寸总和小于网格容器内联轴方向的尺寸（inline-size），即在 grid-template-columns （或 grid-auto-columns）定义的列轨道尺寸总和小于网格容器的宽度；
  • 块轴方向 ：所有行网格轨道的尺寸总和小于网格容器块轴方向的尺寸（block-size），即在 grid-tempalte-rows （或 grid-auto-rows）定义的行轨道尺寸总和小于网格容器高度。

这样你就可以分别在网格容器的：

  • 内联轴方向 ：justify-content 控制列网格轨道在内联轴方向的对齐方式，即控制网格列的对齐；
  • 块轴方向 ：align-content 控制行网格轨道在块轴方向的对齐方式，即控制网格行的对齐。

它们（justify-content 和 align-content 属性）可设置的值是：normal 、start 、end 、center 、stretch 、space-around 、space-between 、space-evenly 、baseline 、first baseline 和 last baseline 。

同样的，我们使用下面这个示例来向大家展示 justify-content 和 align-content 取不同值的效果会是什么？

假设你有一个 500px x 500px 的网格容器，即网格容器的内联轴方向的尺寸（inline-size）和块轴方向尺寸（block-size）都是 500px 。使用 grid-template-columns 和 grid-template-rows 定义了一个三行三列（3 x 3 ）的网格，并且网格轨道尺寸都是 100px ，同时网格轨道之间有 10px 的间距：

.container {inline-size: 500px;block-size: 500px;display: grid;gap: 10px;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);
}

img

可以像 Flexbox 布局中的 justify-content 和 align-content 一样，将剩余空间分配到网格轨道之间。

在网格容器上将 align-content 设置不同值：

.container {align-content: var(--align-content, start);
}

img

Demo 地址：https://codepen.io/airen/full/MWXKjVj

你会发现，在这个示例中，align-content 取值为 normal 、stretch 、baseline 、first baseline 、last baseline 的效果与 start 是等同的。事实上，algin-content 取值 stretch 时会对网格轨道进行拉伸，但并不是所有情景都是如此，它对网格轨道尺寸的设置是有一定要求的。有关于这方面，我们将放到后面与 justify-content 统一阐述。

img

虽然说 align-content 是用来控制网格行轨道在网格容器块轴方向的对齐方式，但从另一个角度来说，也是将网格容器的剩余空间分配给网格轨道之间。比如：

align-content 取值为 center 时，网格容器的剩余空间将一分为二，第一行网格轨道在块轴的起始位置与网格容器块轴方向超始位置的距离等于最后一行网格轨道在块轴的结束位置与网格容器块轴方向结束位置的距离：

img

如果网格容器只有一行行网格轨道时，可以实现垂直居中的效果 。

align-content 取值为 space-around 时，分配给相邻两行网格道之间的网格容器的剩余空间，是第一行网格轨道块轴起始位置距网格容器块轴方向起始位置之间距离的两倍，也是最后一行网格轨道块轴结束位置距网格容器块轴方向结束位置之间距离的两倍。

img

align-content 取值 space-evenly 的效果和 space-around 有点相似，只不过，分配给相邻两行网格轨道之间的网格容器的剩余空间，和第一行网格轨道块轴方向起始位置与网格容器块轴方向起始位置之间的距离相等，也和最后一行网格轨道块轴方向结束位置与网格容器块轴方向结束位置之间的距离相等：

img

align-content 取值为 space-between 会令行网格轨道在网格容器块轴方向两端对齐，即网格容器的剩余空间会平均分配到相邻两行行网格轨道之间：

img

需要注意的是，当行网格轨道的尺寸是 fr 值时，align-content 取任何值的效果都和其默认值 start 等同。比如：

.container {grid-template-rows: 1fr 100px 100px;/* 或 */grid-template-rows: minmax(100px, 1fr) 100px 100px;/* 或 */grid-auto-rows: 1fr;
}

img

Demo 地址： https://codepen.io/airen/full/poKgeMR

也就是说，当网格容器没有剩余空间时，align-content 各值的效果都相同，即等同于 align-content 的 start （默认值效果） 。

既然网格容器有剩余空间，也就有可能会有不足空间出现，比如将示例中的行网格轨道尺寸设置为：

.container {grid-template-rows: 70% 120px 120px; 
}

网格项目溢出网格容器：

img

Demo 地址： https://codepen.io/airen/full/dyKGWYa

网格项目溢出网格容器时，align-content 取值不同时，溢出方向也有所差异：

  • start ，网格项目在网格容器块轴方向结束位置溢出；
  • end ，网格项目在网格容器块轴方向起始位置溢出；
  • center ，网格项目在网格容器块轴两个方向溢出；
  • stretch 与 start 等同；
  • space-around 与 center 等同；
  • space-between 与 start 等同；
  • space-evenly 与 center 等同。

img

在网格容器上显式设置 align-content 值时，还有可能会造成网格区域变大。比如下面这个示例，网格项目一合并了两行两列。当 align-content 取值 space-around 、sapce-evenly 和 space-between 时，行网格轨道之间的间距就会产生变化，这样对于合并多行的网格项目一来说，尺寸（块轴方向尺寸，block-size）也会产生相应变化：

.container {inline-size: 500px;block-size: 500px;display: grid;gap: 10px;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);
}.item:nth-child(1) {grid-row: 1 / span 2;grid-column: 1 / span 2;
}

img

Demo 地址：https://codepen.io/airen/full/OJEMmxN

上面看到的都是行网格轨道在网格容器块轴方向的对齐方式（分配网格容器块轴方向剩余空间）。接下来在前面的示例基础上，将 align-content 换成 justify-content 。

.container {justify-content: var(--justify-content, start);
}

不难发现，justify-content 取值和 align-content 值效果是相同的，唯一不同的是， justify-content 是用来控制列网格轨道在网格容器的内联轴方向的对齐方式，即 分配网格容器内联轴方向的剩余空间 ：

img

Demo 地址：https://codepen.io/airen/full/eYKJWer

justify-content 取值为 center 、space-around 、space-evenly 和 space-between 分配网格容器内联轴方向剩余空间如下：

img

注意，如果网格只有一列，****justify-content 取值 center 可以实现水平居中效果 。

如果 grid-tempalte-columns 或 grid-auto-columns 设置列网格轨道尺寸时，设置了 fr 单位值，那么 justify-content 取任何值的效果都与默认值 start 等同：

.container {grid-template-columns: minmax(100px, 1fr) 100px 100px;
}

img

Demo 地址： https://codepen.io/airen/full/yLEeXOR

网格项目在内联轴方向溢出网格容器时，justify-content 取值不同，溢出方向也有所差异：

  • start ，网格项目在网格容器内联轴方向结束位置溢出；
  • end ，网格项目在网格容器内联轴方向起始位置溢出；
  • center ，网格项目在网格容器内联轴两个方向溢出；
  • stretch 与 start 等同；
  • space-around 与 center 等同；
  • space-between 与 start 等同；
  • space-evenly 与 center 等同。
.container {grid-template-columns: 70% 120px 120px;
}

img

Demo 地址：https://codepen.io/airen/full/oNybwWx

justify-content 和 align-content 一样，取值为 space-around 、space-evenly 和 space-between 会影响网格区域内联尺寸方向的尺寸（inline-size），即宽度会变大：

img

Demo 地址： https://codepen.io/airen/full/YzvwQrN

刚才有提到过，align-content 和 justify-content 在我们演示的示例中取值为 stretch 的效果和 start 是一样的。这主要是因为示例中的网格轨道尺寸是一个固定值，你可以尝试将示例中的 grid-template-columns 和 grid-template-rows 中的值调整为 auto 100px auto ，即有些轨道尺寸由内容来决定：

.container {grid-template-columns: auto 100px auto;grid-template-rows: auto 100px auto;justify-content: stretch;align-content: stretch;
}

那么，

  • 当 justify-content 取值为 stretch 时，设置内在尺寸的列网格轨道在内联轴方向会被拉伸，网格项目会沿着网格容器的内联轴方向填满（整个网格容器内联轴方向可用空间）；
  • 当 align-content 取值为 stretch 时，设置内在尺寸的行网格轨道在块轴方向被拉伸，网格项目会沿着网格容器块轴方向填满（整个网格容器块轴方向可用空间）。

img

Demo 地址： https://codepen.io/airen/full/GRGoEwQ

另外，当网格项目因合并网格单元格创建了一个隐式网格，并且隐式网格轨道尺寸为 auto 时，justify-cotent 和 align-content 取值为 stretch 时，同样会对网格项目进行拉伸：

.container {inline-size: 500px;block-size: 500px;display: grid;gap: 10px;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-auto-flow: dense;justify-content: stretch;align-content: stretch;
}.item:nth-child(1) {grid-row: 1 / span 2;grid-column: 1 / span 2;
}.item:nth-child(5) {grid-column: 3 / span 2;
}

img

Demo 地址： https://codepen.io/airen/full/GRGoEwQ

在使用的时候，你还可以将 justify-content 和 align-content 简写成 place-content ，即：

place-content: <align-content> <justify-content>

当 place-content 只有一个值时，表示 align-content 和 justify-content 值相同，如果有两个值时，第一个值是 align-content ，第二个则是 justify-content ：

.container {place-content: center end;/* 等同 */align-content: center;justify-content: end;place-content: center;/* 等同 */align-content: center;justify-content: center;
}

这样一来， Web 中又多了一种实现水平垂直居中的布局效果，即 place-content 属性的值设置为 center 。不过，使用 place-content 实现水平垂直居中，它有一个条件限制，网格容器中只有一个网格轨道，即 需要在网格容器中水平垂直居中的元素，它既是行网格轨道，也是列网格轨道 ：

<div class="container"><div class="item">我需要水平垂直居中</div>
</div>
.container {display: grid;place-content: center;
}

img

Demo 地址：https://codepen.io/airen/full/XWYmypr

用下图简单地总结一下，网格容器上设置 justify-content 或 align-content 属性的值，网格轨道的对齐方式如下：

img

Demo 地址： https://codepen.io/airen/full/RwJrXrQ

网格布局中，你可以同时使用多个对齐属性来控制网格中的对齐（网格项目或网格轨道），比如：

.container {justify-content: space-evenly;justify-items: center;align-content: space-evenly;align-items: center;/* 等同于 */place-content: space-evenly;place-items: center;
}

正如你所看到的，由于可用于网格布局中的对齐属性很多种，如果你对网格布局中的对齐属性不是很了解的话，往往设置了对齐属性，却达不到预期的效果。这里有一个小技巧，你在网格布局中使用网格对齐相关的属性时，你需要做确认：

  • 你是要对网格轨道设置对齐吗？如果是，使用 place-content 属性；如果希望只控制网格轨道沿着网格容器块轴方向的对齐，则使用 align-content；如果希望只控制网格轨道沿着内联轴方向的对齐，则使用 justify-content。
  • 你是要对所有网格项目设置对齐吗？如果是，使用 place-items 属性；如果希望只控制网格项目沿着网格区域块轴方向对齐，则使用 align-items ；如果希望只控制网格项目沿着网格区域内联轴方向对齐，则使用 justify-items。
  • 你是要对单个网格项目设置对齐吗？如果是，使用 place-self 属性；如果只希望控制单个网格项目沿着网格区域块轴方向对齐，则使用 align-self ；如果只希望控制单个网格项目沿着网格区域内联轴方向对齐，则使用 justify-self。

比如下面这样的一个示列：

<div class="container"><div class="item"></div><!-- 这里省略七个 item --><div class="item"></div></div>

.container {inline-size: 100%;max-width: 50vw;margin: 0 auto;aspect-ratio: 1;display: grid;gap: 1rem;grid-template-columns: repeat(2, 120px auto);grid-auto-rows: 120px auto;grid-auto-flow: dense;
}.item:nth-child(1) {grid-row: span 2;grid-column: span 2;
}

使用上面的代码，构建了一个像下面这样的网格，其中网格项目一合并了两行两列：

img

目前为止，并没有显式地设置任何与对齐有关的属性。事实上，它相当于在网格容器上显式设置了 place-items 的值为 stretch ，即：

.container {place-items: var(--align-items, stretch)  var(--justify-items, stretch)；
}

因为网格项目的 place-items （即 align-items 和 justify-items）的默认值是 stretch 。它也相当于在所有网格项目上设置了 place-self 的值为 stretch ：

.container > * {place-self: var(--align-self, stretch) var(--justify-self, stretch);
}

当你在网格容器 .container 显式设置 place-items 的值不是 stretch （非默认值）时，那么所有网格项目的对齐方式都会得到改变：

img

这个时候，要是你在单个网格项目上（比如网格项目一）显式设置了 place-self 的值为 stretch ，你会发现网格项目一在合并的网格区域的块轴和内联轴方向都会被拉伸，填满整个网格区域。即使是网格容器上显式设置了 place-items 的值为 center stretch ：

.container {place-items: center stretch;
}.item:nth-child(1) {place-self: stretch;
}

img

单个设置 place-self 的权重要大于在网格容器上设置的 place-items。正如你所看到的，网格项目一最终以自身 place-self 的值来控制对齐方式：

img

需要注意的是，place-content 的默认值是 start ，但这并不意味着网格容器默认就是 place-content 取值 start 的效果。就拿上面这个示例来说，在网格容器上设置 place-content 属性值为 start 前后的效果是不一样的：

img

也就是说，如果网格容器上未显式设置 place-content 时，并不会以默认的 place-content: start 来控制网格轨道的对齐 。

换句话说，只要在网格容器上显式设置了 place-content 属性（或它的子属性 align-content 或 justify-content）的值，就会改变设置值为 auto 的轨道尺寸，也会改变网格轨道之间的间距，但它不会改变网格项目的对齐方式。

你也可以简单的这么理解：

  • place-content 改变网格的对齐方式和网格轨道之间的间距，但不会改变网格项目在网格区域的对齐方式；
  • place-items 和 place-self 会改变网格项目在网格区域的对齐方式，同时也会改变网格项目的尺寸，但不会改变网格轨道之间的间距；
  • place-items 用于网格容器，会改变所有网格项目；place-self 用于网格项目，只会改变设置了该值的网格项目。

img

Demo 地址：codepen.io

网格项目的 margin:auto

通过前面课程的学习，你已经知道了在 Flex 项目中设置 margin 属性的值为 auto 时，可以达到 Flex 项目对齐的效果：

img

网格布局中，在网格项目上设置 margin 的值为 auto 时也能达到相似的效果。比如：

img

Demo 地址： https://codepen.io/airen/full/YzvqKgz

正如你所看到的，在网格布局中，你可以在网格项目上显式设置 margin: auto 实现水平垂直居中的效果：

.container {display: grid;
}.item {grid-area: 1 / 1 / -1 / -1;margin: auto;
}

img

Demo 地址： https://codepen.io/airen/full/xxzVxoV

除了在网格项目上显式设置 margin 的值为 auto 之外，也可以将其设置为 <length-percentage> 值，用来控制网格项目之间的间距。不过，它和网格容器上的 gap 属性还是有所区别的：

  • gap 是用来设置网格轨道之间的间距；
  • margin 是用来设置网格项目外侧边缘和网格区域边缘之间的间距。

img

你会发现，网格项目上设置 margin 值时，网格项目会向里收缩！另外，网格布局中网格项目或网格轨道的对齐都是沿着网格容器的块轴方向或内联轴方向，所以使用 margin 值为 auto 达到对齐效果时，更建议采用相应的逻辑属性，比如：

  • magin-inline-start 替代 margin-left ，相当于在网格项目上设置 justify-self: end；
  • margin-inline-end 替代 margin-right ，相当于在网格项目上设置 justify-self: start；
  • margin-block-start 替代 margin-top ，相当于在网格项目上设置 align-self: end；
  • margin-block-end 替代 margin-bottom ，相当于在网格项目上设置 align-self: start。

你也可以设置：

  • margin-inline 的值为 auto 实现水平居中，等同于 justify-self: center；
  • margin-block 的值为 auto 实现垂直居中，等同于 align-self: center。

小结

网格布局中的对齐和 Flexbox 布局中的对齐有点相似，只不过网格布局中主要分为三种使用情景：

  • place-content （它的子属性 align-content 和 justify-content）控制网格轨道在网格容器的块轴和内联轴方向的对齐；
  • place-items （它的子属性 align-items 和 justify-items ）控制所有网格项目在网格区域的块轴和内联轴方向的对齐；
  • place-self （它的子属性 align-self 和 justify-self ）控制单个网格项目在网格区域的块轴和内联轴方向的对齐。

它的 Flexbox 布局的 align-content 、justify-content 、alig``n-items 以及 align-self 还是有所差异的：

对齐属性Flexbox 布局中的对齐Grid 布局中的对齐备注
align-contentFlex行在 Flexbox 容器侧轴方向的对齐行网格轨道在网格容器的块轴方向的对齐Flex 行是指 Flexbox 容器上显式设置 flex-wrap 的值为 wrap 或 wrap-reverse 产生断行。每个 Flex 行都有主轴和侧轴方向
justify-contentFlex 项目在 Flex 容器主轴方向的对齐列网格轨道在网格容器的内联轴方向的对齐
place-contentplace-content: <align-contetn> <justify-content>
align-itemsFlex 项目在 Flex 容器侧轴方向的对齐所有网格项目在网格区域的块轴方向的对齐
justify-items所有网格项目在网格区域的内联轴方向的对齐Flexbox 布局中不支持 justify-items
place-itemsplace-items: <align-items> <justify-items>
align-self单个 Flex 项目在 Flex 容器侧轴方向的对齐单个网格项目在网格区域的块轴方向的对齐
justify-self单个网格项目在网格区域的内联轴方向的对齐Flexbox 布局中不支持 justify-self
place-selfplace-self: <align-self> <justify-self>

不管是 Flexbox 布局中的对齐还是网格布局中的对齐，它们都受 CSS 的书写模式或阅读模式的影响！

另外，网格布局中的网格项目上，也可以显式设置 margin 的值来达到单个网格项目对齐，这个和 Flexbox 布局中的 Flex 项目设置 margin: auto 是等同的：

属性：值Flexbox 布局Grid 布局
margin-left: auto如果 Flexbox 容器中只有一个 Flex 项目时，等同于在 Flex 容器上设置 justify-content 的值为 flex-end 或 end等同于在网格项目上设置 justify-self: end如果 Grid 容器中只有一个 Grid 项目时，等同于在网格容器上设置 justify-items: end 或 justify-content: end
margin-right: auto如果 Flexbox 容器中只有一个 Flex 项目时，等同于在 Flex 容器上设置 justify-content 的值为 flex-start 或 start等同于在网格项目上设置 justify-self: start 如果 Grid 容器中只有一个 Grid 项目时，等同于在网格容器上设置 justify-items: start 或 justify-content: start
margin-top: auto等同于在 Flex 项目上设置 align-self: end 或 align-self: flex-end 如果 Flexbox 容器中只有一个 Flex 项目时，等同于在 Flexbox 容器上设置 align-items 的值为 end 或 flex-end等同于在 Grid 项目上设置 align-self: end 如果 Grid 容器中只有一个 Grid 项目时，等同于在 Grid 容器上设置 align-items: end 或 align-content: end
margin-bottom: auto等同于在 Flex 项目上设置 align-self: start 或 align-self: flex-start 如果 Flexbox 容器中只有一个 Flex 项目时，等同于在 Flexbox 容器上设置 align-items 的值为 start 或 flex-start等同于在 Grid 项目上设置 align-self: start 如果 Grid 容器中只有一个 Grid 项目时，等同于在 Grid 容器上设置 align-items: start 或 align-content: start

不管是在 Flexbox 布局中还是 Grid 布局中，在 Flex 项目或 Grid 项目上设置：

  • magin-inline: auto 可以实现水平居中；
  • margin-block: auto 可以实现垂直居中。

需要注意的是，因为 Flexbox 布局是一种一维布局，所以在 Flexbox 布局中没有 justify-items 和 justify-self 两个属性！

到这里，小册分了两节课分别介绍了 Flexbox 和 Grid 布局中的对齐。两个布局模块中都有相同的属性以及值，但所起的作用是略有差异的，但也有互通的。因此，在 CSS 规范中，将它们都纳入了 CSS Box Alignment 模块中。不过，在我们小册中不做展开性的阐述。因此，有关于对齐的部分我们就介绍到这里了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/86116.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/86116.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

leetcode 291. Word Pattern II和290. Word Pattern

leetcode 291. Word Pattern II和290. Word Pattern

目录 291. Word Pattern II 290. Word Pattern 291. Word Pattern II 回溯法哈希表 class Solution {unordered_map<char,string> hashmap;unordered_set<string> wordset; public:bool wordPatternMatch(string pattern, string s) {return backtrack(pattern,…
阅读更多...
大模型的开发应用（十三）：基于RAG的法律助手项目（上）：总体流程简易实现

大模型的开发应用（十三）：基于RAG的法律助手项目（上）：总体流程简易实现

RAG法律助手项目&#xff08;上&#xff09;&#xff1a;总体流程简易实现 1 项目介绍1.1 方案选型1.2 知识文档 2 文档解析3 知识库构建3.1 构建知识节点3.2 嵌入向量初始化3.2 向量存储 4 查询4.1 初始化大模型4.2 模型响应4.2 本文程序存在的问题 完整代码 1 项目介绍 本项…
阅读更多...
覆盖迁移工具选型、增量同步策略与数据一致性校验

覆盖迁移工具选型、增量同步策略与数据一致性校验

1 引言 在当今数据驱动的时代&#xff0c;数据迁移已成为系统迭代、数据库升级、云迁移和架构演进中的关键环节。根据Gartner的调研&#xff0c;超过70%的企业级数据迁移项目因工具选择不当或同步策略缺陷而延期或失败。数据迁移不仅仅是简单的数据搬运&#xff0c;而是涉及数…
阅读更多...
`docker run -it --rm` 笔记250624

`docker run -it --rm` 笔记250624

docker run -it --rm 笔记250624 docker run -it --rm 是一个强大且常用的 Docker 命令组合&#xff0c;特别适合交互式开发和调试场景。以下是详细解析和使用指南&#xff1a; 参数解析 参数作用典型场景-i保持 STDIN 打开&#xff08;交互模式&#xff09;需要输入命令的交…
阅读更多...
解锁阿里云AnalyticDB：数据仓库的革新利器

解锁阿里云AnalyticDB：数据仓库的革新利器

AnalyticDB&#xff1a;云数据仓库新势力 在数字化浪潮中&#xff0c;数据已成为企业的核心资产&#xff0c;而云数据仓库作为数据管理与分析的关键基础设施&#xff0c;正扮演着愈发重要的角色。阿里云 AnalyticDB 作为云数据仓库领域的佼佼者&#xff0c;以其卓越的性能、创…
阅读更多...
【PX30 Qt 5.15 交叉编译环境搭建完整指南】

【PX30 Qt 5.15 交叉编译环境搭建完整指南】

PX30 Qt 5.15 交叉编译环境搭建完整指南 (Ubuntu 20.04 → PX30 aarch64) &#x1f3af; 项目概览 本指南详细记录了在Ubuntu 20.04上搭建针对Rockchip PX30的Qt 5.15.2交叉编译环境的完整过程&#xff0c;包括实际操作步骤、遇到的问题及解决方案。 目标平台: Rockchip PX3…
阅读更多...
深入理解读写锁 ReadWriteLock

深入理解读写锁 ReadWriteLock

在高性能并发编程中&#xff0c;如何有效地管理共享资源的访问是核心挑战之一。传统的排他锁&#xff08;如ReentrantLock&#xff09;在读多写少的场景下&#xff0c;性能瓶颈尤为突出&#xff0c;因为它不允许并发读取。Java并发包&#xff08;java.util.concurrent.locks&am…
阅读更多...
Unity Addressable使用之检测更新流程

Unity Addressable使用之检测更新流程

补充知识 关键文件说明 Addressable打包后会生成多种文件&#xff0c;主要包括 .hash、.json 和 .bundle 文件&#xff0c;它们各自有不同的作用。 .hash 文件&#xff08;哈希文件&#xff09; 作用&#xff1a; 用于 版本对比&#xff0c;检查资源是否有更新。存储的是 资…
阅读更多...
Elasticsearch 中实现推荐搜索（方案设想）

Elasticsearch 中实现推荐搜索（方案设想）

1. 存储商品数据的数据类型 为了支持推荐搜索&#xff0c;商品数据通常需要包含以下字段&#xff1a; 商品索引结构 PUT /products {"mappings": {"properties": {"product_id": {"type": "keyword" // 商品 ID},"…
阅读更多...
Aerotech系列（4）Aerotech.A3200名空间

Aerotech系列（4）Aerotech.A3200名空间

IconTypeDescriptionAxisMask Represents a selection of axes Controller Represents a controller Allows configuring and c
阅读更多...
React Router 是怎么实现灵活导航的？

React Router 是怎么实现灵活导航的？

&#x1f399; 欢迎来到《前端达人 React播客书单》第 21 期。 视频版&#xff08;播客风格更精彩&#xff09; 今天我们不讲 Hook&#xff0c;来拆解前端开发中另一个高频组件&#xff1a;React Router 的进阶导航模式。 你可能用过 <Link> 或 <Route>&#xff0…
阅读更多...
Modbus TCP转Profibus DP网关与JF - 600MT 称重变送器轻松实现数据互换

Modbus TCP转Profibus DP网关与JF - 600MT 称重变送器轻松实现数据互换

Modbus TCP转Profibus DP网关与JF - 600MT 称重变送器轻松实现数据互换 在工业自动化领域&#xff0c;不同设备之间的通信与数据交互至关重要。Modbus TCP转Profibus DP网关作为连接不同协议设备的关键桥梁&#xff0c;发挥着不可或缺的作用。本文将以JF - 600MT称重变送器与3…
阅读更多...
聊聊 SQL 注入那些事儿

聊聊 SQL 注入那些事儿

相信大家对于学校们糟糕的网络环境和运维手段都早有体会&#xff0c;在此就不多做吐槽了。今天我们来聊一聊SQL注入相关的内容。 何谓SQL注入&#xff1f; SQL注入是一种非常常见的数据库攻击手段&#xff0c;SQL注入漏洞也是网络世界中最普遍的漏洞之一。大家也许都听过某某学…
阅读更多...
多传感器融合

多传感器融合

目录 多传感器融合 多传感器融合的方向 传感器融合方案介绍 LOAM LIO-SAM LVI-SAM 多线激光雷达性质 什么是运动畸变 两步优化的帧间里程记 IMU 器件介绍及选型建议 IMU 标定方法简介 视觉里程计 VS 激光里程计 LVI-SAM 激光视觉融合思路简介 多传感器融合工程实践经验与技巧 多…
阅读更多...
Auto-GPT vs ReAct：两种智能体思路对决

Auto-GPT vs ReAct：两种智能体思路对决

目录 Auto-GPT vs ReAct&#xff1a;两种智能体思路对决 &#x1f9e0; 一、智能体的演化背景 &#x1f9e9; 二、Auto-GPT&#xff1a;自循环的执行体 &#x1f50d; 三、ReAct&#xff1a;推理 行动的交错协同 ⚔️ 四、对比总结 &#x1f6e0; 五、你该选谁&#xff…
阅读更多...
本地部署大模型性能测试，DeepSeek-R1-0528-Qwen-8B 依然是我的不二之选

本地部署大模型性能测试，DeepSeek-R1-0528-Qwen-8B 依然是我的不二之选

大家好&#xff0c;我是 ai 学习的老章 介绍一个大模型并发性能测试工具 看一下我高频使用的&#xff0c;在2*4090显卡上部署的 DeepSeek-R1-0528-Qwen-8B 性能如何 _我_特别喜欢的三个DeepSeek版本 DeepSeek-R1-0528 蒸馏 Qwen3:8B 大模型&#xff0c;双 4090 本地部署&am…
阅读更多...
华为云Flexus+DeepSeek征文｜华为云 Dify 高可用部署教程：CCE 容器集群一键构建企业级智能应用

华为云Flexus+DeepSeek征文｜华为云 Dify 高可用部署教程：CCE 容器集群一键构建企业级智能应用

前言 在数字化转型加速的企业级应用场景中&#xff0c;构建高可用智能平台已成为业务创新的核心驱动力。本文深度解析基于华为云CCE容器服务的Dify智能应用部署实践&#xff0c;揭示如何通过云原生架构与AI技术的深度融合&#xff0c;实现企业知识管理、智能客服等场景的敏捷落…
阅读更多...
Linux 多进程间通信（IPC）详解

Linux 多进程间通信（IPC）详解

在 Linux 系统中，多进程通信（Inter-Process Communication, IPC） 是实现多个进程之间数据交换和同步的重要机制。由于每个进程拥有独立的地址空间，因此需要借助特定的系统机制来实现信息共享。 📌 Linux 下常见的 6 种进程间通信方式 管道（Pipe）命名管道（FIFO）消息队…
阅读更多...
服务器数据恢复——异常断电导致服务器故障的数据恢复案例

服务器数据恢复——异常断电导致服务器故障的数据恢复案例

服务器数据恢复环境&#xff1a; 某服务器上有一组由12块硬盘组建的raid5磁盘阵列。 机房供电不稳定导致机房中该服务器非正常断电&#xff0c;重启服务器后管理员发现服务器无法正常使用。 意外断电可能会导致服务器上的raid模块损坏。 服务器数据恢复过程&#xff1a; 1、将故…
阅读更多...
微信小程序中 rpx与px的区别

微信小程序中 rpx与px的区别

在微信小程序中的rpx比px方便的多 <!--pages/welcome/welcome.wxml--> <!--rpx替换px--> <image style"width:200rpx;height: 200rpx"src"/images/avatar/3.png"></image> <text>你好&#xff0c;冻梨</text> <but…
阅读更多...
最新文章

Copyright @ 2022~2023