在相关的布局，如grid或flexbox，可以同时沿着块级和内联方向对齐元素。
构成属性：align-items、justify-items
如果未提供第二个值，则第一个值作为第二个值的默认值。
ie不兼容，其他都兼容。
代码示例参照：https://codepen.io/una/pen/YzyYbBx
将所有直接子节点上的 align-self 值设置为一个组。a
lign-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。
属性值：
1、normal:
start?的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。stretch一样。stretch一样。stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。这个我也不太理解，复制粘贴的……
2、flex-start:元素向垂直轴起点对齐
3、flex-end:元素向垂直轴末端对齐
4、start:项目在适当的轴上朝着对齐容器的起始边缘对齐。
5、end:项目在适当的轴上朝着对齐容器的末端对齐。
6、center:元素在垂直轴居中。如果元素在垂直轴上的高度高于其容器，那么在两个方向上溢出距离相同。
7、left:元素在左边缘对齐。如果属性的轴与内联轴不平行，则该值的效果类似于start。
8、right:元素在右边缘对齐。如果属性的轴与内联轴不平行，则该值的效果类似于start。
9、self-start:元素在适当轴上，对齐容器的顶部边缘对齐。
10、self-end:元素在适当轴上，对齐容器的底部边缘对齐。
11、baseline:first baseline,last baseline 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
12、stretch:元素包含外边距的交叉轴尺寸被拉升至行高。
使元素沿适当轴线对齐到每个盒子。
属性值：
stretch：元素包含外边距的适当轴尺寸被拉升至行高。
center：元素在对其容器适当轴居中对齐。
start：元素在对其容器适当轴开始位置对齐。
end：元素在对其容器适当轴结束位置对齐。
一种一维的布局，能处理一个维度上的元素布局，一行或者一列。有两根轴线，主轴和交叉轴。
主轴由flex-direction定义，交叉轴垂直于主轴。
flex-direction:
row:元素横向排列，默认值
row-reverse:元素横向排列 起始线和终止线交换
colume:竖向排列
colume-reverse:竖向排列 起始线和终止线交换
flex元素有以下行为：
1、排列为一行或一列
2、从主轴起始线开始
3、不会在主轴方向拉伸，但可以缩小
4、拉伸填充交叉轴大小
5、flex-basis:auto
6、flex-wrap:nowrap
由于flex-wrap的值设置为wrap,所以项目的子元素换行显示，nowrap会用允许缩小的初始flexbox值缩小以适应容器，若子元素无法缩小会导致溢出或缩小程度不够。所以为了实现多行效果需设置属性flex-wrap值为wrap。
flex可以设置为三个属性flex-grow、flex-shrink、flex-basis，即flex:
flex-basis:定义元素空间大小，无指定尺寸采用元素内容的尺寸。改变控件基础标准。
flex-grow:赋值为正整数沿主轴方向增长尺寸，按比例分配空间。增加空间。
flex-shrink:处理主轴上收缩空间问题。收缩空间
网格布局，主要属性：grid-template、grid等。
grid-template 包含三个属性：grid-template-rows、grid-template-columns、grid-template-areas
1、grid-template-rows、grid-template-columns
网格行、网格列
属性值：none、长度大小、百分比（用/分割）、fr单位的弹性大小（1fr和100%的概念一样）、max-content（最大值）
、min-content(最小值)、minmax(min,max)、auto、repeat(次数，长度)(重复)
repeat次数可以为正整数、auto-fit、auto-fill;长度也可以用minmax等。
可根据列的数量用空格分隔属性，比如：auto 1fr auto
用/分割表示占比。
2、grid-template-areas
网格区域。
属性值：none或用空格分隔的字符串（非矩形无效）。
设置行列的不同样式用 /分割。
设置值的范围
clamp：最小值、首选值、最大值
小于最小值用最小值，在最大值和最小值之间用首选值，大于最大值用最大值。
参考路径：