justify-content与justify-items与常用属性

justify-content

在CSS中，justify-content 是用于控制容器中的子元素在主轴上的对齐方式的属性。它必须是与display: flex;或display: inline-flex;属性结合使用时才有效。

display: flex;是一种用于创建弹性容器的CSS属性，它会将其子元素视为弹性项目，从而启用弹性布局。只有在使用弹性布局时，justify-content属性才会生效。

弹性布局（Flexbox）是一种现代的CSS布局模型，通过将容器分为主轴和交叉轴，使开发者能够更容易地对齐、分布和重新排列元素。justify-content属性用于控制主轴上的对齐方式，可使用不同的值来实现不同的布局效果，例如居中对齐、两端对齐、均匀分布等。

justify-content的属性

flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离,容器的主轴上的空间会被均匀地分配给子元素
space-around:元素周围保持相等的距离。

justify-items

justify-items 属性用于控制网格容器中的网格项目在其网格单元格中的水平对齐方式。

justify-items 的常见属性

start：将网格项目的内容对齐到网格单元格的起始位置。
end：将网格项目的内容对齐到网格单元格的末尾位置。
center：将网格项目的内容对齐到网格单元格的中间