grid布局时 justify-*、align-*, *-content *-items 的区别

justify-* 是沿水平方向设置排列方式；（靠左，靠右、居中）

align-*  指沿垂直方向设置排列方式。（靠上，靠下，居中）

*-items：容器内flex-wrap设置none，所有子项可以用*-items来设置子项的对齐方式，否则设置无无效。

应为flex-wrap设置为none,所有元素排成一行或一列，当排成一行，用align-items设置上、中、下对齐，当排成一列时，用justify-items设置左、中、右对齐。

*-content:容器内flex-wrap设置wrap，所有子项作为容器的内容（content），用*-content来设置对齐方式，否则设置无无效。

flex或grid 布局时，将容器划分为多个矩形区域,如果所有子元素的尺寸相加小于容器的尺寸，即容器有多余空间，*-content用以设置如何分配空白空间。水平方向的多余空间如何分配，用justify-content来设置，设置值为left，表示所有子元素靠左，空白区域留在右侧，设置值为space-evenly,表示均匀分配剩余空间，其余值也很容易理解。类似的，align-content用来设置垂直方向的多余空间分配