持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情

前言

在上一篇文章中我们学会了网格系统的一些基本的用法，今天我们再来讲解下网格系统中的对齐与分布的知识点。

对齐与分布

bootstrap5的网格系统主要就是运用了flex这个css的属性。所以，关于这篇文章的内容，需要有一定的flex基础。对齐与分布来讲的话我们会分为主轴和交叉轴的部分。主轴来讲的话，我们需要使用到justify-content这样的一个属性。

对齐

根据我们之前学习的知识，我们使用指定栏宽的方式将画面在电脑上屏幕上分为三栏。

页面效果：

这时候分栏是完成了，但是呢，这样做成了一个满版的效果，会显得很拥挤。我们这时候就想要每栏之间的间距宽一点，显得不那么拥挤。

我们就可以做个三栏的画面，但是每栏占比是十二分之三实际是分了四栏，剩下多出来的十二分之三我们想分配在每栏之间的间距中，这样显得美观。

我们先需要将画面分成四栏，但是只有三栏的内容。我们将上面的代码中的row-cols-lg-3改成row-cols-lg-4即可。

我们能想象现在画面会是怎么样的吗？

没错，画面整体会偏左，因为我们实际上是分成了四栏，我们放四个栏的话就是刚刚好的。

那我们现在就是想要三栏不需要四个栏怎么办呢？

我们就需要把三栏做到主轴居中，回想下css中什么属性能做到呢？没错就是我们在开篇讲到的justify-content属性。

我们这里先手写css来实现下三个网格居中的效果。我们需要将css属性定义在row容器上，我们要设置在父层上面子层的元素才会实现居中。

.row{
    justify-content: center;
}

我们来看一下画面。

这样就完成了一个三栏居中的效果。

在我们的bootstrap5中，就不需要我们像刚才那样手磕css了，我们直接在row上再加上一个class叫做justify-content-center。

就像这样，只需要一个添加一个clss的值我们就可以实现。

画面呢，跟刚才的效果完全一样。

关于我们的justify-content属性，我们还可以实现对齐起点和对其终点。

如果是在css中我们要这样写：

对齐起点

.row{
    justify-content: start;
}

对齐终点

.row{
    justify-content: end;
}

在bootstarp5中我们只需要添加class值justify-content-start或justify-content-end即可实现对齐起点或者是对齐终点。

对齐起点

代码示例

画面效果

对齐终点

代码示例

画面效果

这就实现了我们的网格的一个对齐的效果。

分布

除了对齐呢，我们还有个东西叫做分布。

回到我们刚才的居中的画面。

虽然我们使三栏居中了，但是你发现没有，栏与栏之间的间距很小，两边的间距又太大了，这样看还是不太美观的。这时候我们就希望对剩余区域空间重新分布，使其分布到栏与栏之间，让栏与栏之间的间距变大并做到一个等分的效果。

为了实现这样的效果我们在css中会使用什么呢？

有两个东西：justify-content: space-between;和justify-content: space-around;

space-between效果：

space-around效果：

space-between和space-around区别就是space-between会把第一个网格和最后一个网格分别放置到起点和终点的位置再将网格以相等的间距放置；而space-around会将直接将网格以相等的间距来放置。

bootstrap5中的写法依然很简单。

space-between

画面效果：

space-around

画面效果：

跟刚刚我们用css方式写的画面的效果一模一样，而且使用bootstrap5非常的方便。

总结

关于bootstrap5网格系统的对齐与分布就讲到这里。喜欢的小伙伴们多多支持。下一篇文章我们将学习的是网格系统的排序控制。