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：将网格项目的内容对齐到网格单元格的中间位置。
stretch：将网格项目的内容水平拉伸以填充整个网格单元格的宽度。
baseline：将网格项目的基线与网格单元格的基线对齐。

align-items

align-items 是一个用于弹性容器的 CSS 属性，它控制容器中子元素在交叉轴上的对齐方式

align-items 常见属性

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。

flex-direction

flex-direction 是一个用于弹性容器的 CSS 属性，它决定了容器中的子元素在主轴上的排列方向。

flex-direction 常见属性

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。

flex-wrap

flex-wrap 是一个用于弹性容器的 CSS 属性，它控制容器中的子元素是否换行以适应容器的大小。

默认情况下，当子元素超出弹性容器的宽度时，它们会自动缩小以适应容器，而不会换行。但是，通过使用 flex-wrap 属性，可以控制子元素是否允许换行。

flex-wrap 常见属性

nowrap：默认值，子元素不换行，会缩小以适应容器。
wrap：子元素允许换行，超出容器宽度时会进行换行。
wrap-reverse：子元素允许换行，但换行方向与默认方向相反。

flex-flow

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

我们用flex-flow: row wrap去设置行并自动换行。

也可以用flex-flow:column wrap来设置

align-content

align-content 是一个用于弹性容器的 CSS 属性，它控制容器中多行或多列子元素在交叉轴上的对齐方式。align-content 只在容器存在多行或多列时才会生效，而单行的情况下不会产生任何效果。

align-content常见属性

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。