CSS中的Flex布局常用的属性介绍和使用说明

justify-content：定义 Flex 项目在水平方向上的对齐方式

justify-content: flex-start;		//起始端对齐

justify-content: flex-end;			//末尾段对齐
 
justify-content: center;			//居中对齐
 
justify-content: space-around;		//均匀分布
 
justify-content: space-between;		//两端对齐，中间均匀分布

align-items：定义 Flex 项目在垂直方向上的对齐方式

align-items:flex-start;		//起始端对齐
 
align-items:flex-end;		//末尾端对齐
 
align-items:center;			//居中对齐
 
align-items:baseline;		//基线对齐，这里的baseline默认是指首行文字
 
align-items:stretch;		//子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

align-content：定义多行 Flex 项目在垂直方向上的对齐方式

align-content: stretch;			//默认值，多行项目被拉伸以填满容器的垂直方向。

align-content: flex-start;		//多行项目在垂直方向起始位置对齐。

align-content: flex-end;		//多行项目在垂直方向末尾位置对齐。

align-content: center;			//多行项目在垂直方向中间位置对齐。

align-content: space-between;	//多行项目在垂直方向上均匀分布，首尾行贴紧容器边界。

align-content: space-around;	//多行项目在垂直方向上均匀分布，行之间有相等的间隔。

align-content: space-evenly;	//多行项目在垂直方向上均匀分布，行之间和首尾与容器边界之间的间隔均相等。

flex-direction：设置 Flex 容器中 Flex 项目的主轴方向

flex-direction: row;				//默认值，主轴为水平方向，项目从左到右排列。

flex-direction: row-reverse;		//主轴为水平方向，项目从右到左排列。

flex-direction: column;				//主轴为垂直方向，项目从上到下排列。

flex-direction: column-reverse;		//主轴为垂直方向，项目从下到上排列。

flex-wrap：设置 Flex 容器中的项目是否换行

flex-wrap: nowrap;					//默认值，项目不换行，尽可能在一行内显示。

flex-wrap: wrap;					//项目在需要时换行，多余的项目将移动到下一行。

flex-wrap: wrap-reverse;			//项目在需要时换行，多余的项目将移动到上一行。

justify-items 属性用于设置 Flex 容器中单个 Flex 项目在主轴上的对齐方式

具体来说，justify-items 适用于设置单个 Flex 项目在主轴方向上的对齐，而不是多个项目之间的对齐。如果你希望设置整个 Flex 容器内所有项目的对齐方式，应该使用 justify-content 属性
下面是 justify-items 的可用值：

justify-items: auto;			//默认值，项目采用父容器的 justify-content 对齐方式。

justify-items: flex-start;		//项目在主轴起始位置对齐。

justify-items: flex-end;		//项目在主轴末尾位置对齐。

justify-items: center;			//项目在主轴中间位置对齐。

justify-items: stretch;			//项目被拉伸以填满父容器的宽度。

这个属性适用于直接应用于 Flex 项目的样式。例如：

.flex-container {
  display: flex;
  justify-items: center; /* 设置单个项目在主轴上居中对齐 */
}

.flex-item {
  /* 这里是 Flex 项目的样式 */
}

使用 justify-items 可以为单个项目定义在主轴方向上的对齐方式，它会覆盖 justify-content 对整个 Flex 容器内项目的对齐方式的控制。请注意，justify-items 只对单个项目有效，如果你想要设置整个 Flex 容器内项目的对齐方式，应该使用 justify-content。