Bootstrap5 Flex 对齐

.justify-content-*类：在主轴上的对齐方式

https://v5.bootcss.com/docs/utilities/flex/#justify-content

使用.justify-content-*类可以改变弹性项目在主轴上的对齐方式（起始为x轴，如果flex-direction设置为column则为y轴）。*号允许的值有：

• start：默认值。从起始点排列元素
• end：从终止点排列元素
• center：居中排列
• between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
• around：均匀排列每个元素，每个元素周围分配相同的空间
• evenly：均匀排列每个元素，每个元素之间的间隔相等

.justify-content-start

.justify-content-end

.justify-content-center

.justify-content-between

4个盒子：

.justify-content-around

.justify-content-evenly

响应式

justify-content 也有适应不同设备的变体。

.align-items-* 类：控制单行在交叉轴上的对齐方式

https://v5.bootcss.com/docs/utilities/flex/#align-items

.align-items-*类可以更改弹性项目在交叉轴上的对齐方式（默认为y轴，如果flex-direction设置为column则为x轴）。*号允许的值有：

• start
• end
• center
• baseline
• stretch：浏览器默认值

.align-items-stretch类（默认方式）

.align-items-start类

.align-items-center类

水平居中、垂直居中

.align-items-end类

.align-items-baseline类

.align-content-* 类：控制多行项目在交叉轴上的对齐方式

https://v5.bootcss.com/docs/utilities/flex/#align-content

.align-content-* 类：控制多行项目在交叉轴上的对齐方式。

注意：这个属性对于单行的项目没有效果。

.align-content-* 类，其中*号允许的值为：

• start
• end
• center
• between
• around
• stretch

.align-content-start 类

.align-content-end 类

.align-content-center 类

.align-content-between 类

.align-content-around 类

.align-content-stretch 类

响应式

align-content的响应式变种：