專業術語：
1.主軸和側軸：
主軸、主軸方向： 伸縮容器的主軸，伸縮項目主要沿着這一條軸進行布局，取決於justify-content， 默認是水平的（即x軸方向） 如果justify-content：column則為縱向的（即為y軸方向）
側軸、側軸方向：與主軸垂直的軸稱為側軸，取決於主軸
2.伸縮容器和伸縮項目：
伸縮容器： 設置display：flex的元素
伸縮項目： 其下的子元素
設置在項目上的屬性align-self: auto （默認值）| flex-start | flex-end | center | baseline | stretch（設置在項目上的對齊方式僅作用在該項目上）
案例：
代碼：
效果：
默認值為auto：元素繼承了它的父容器的 align-items 屬性。如果父容器沒有該屬性則為 "stretch"。
1.給demo元素添加 align-self: center;(沿側軸方向居中對齊)
2.給demo元素添加 align-self: flex-start;(沿側軸方向起始位置對齊)
3.給demo元素添加 align-self: flex-end;(沿側軸方向結束位置對齊)
4.給demo和demo1元素分別添加 align-self: baseline;(沿第一行文字對齊)
4.給demo和demo1元素添加 align-self: stretch;（元素被拉伸以適應容器。如果指定側軸大小的屬性值（默認側軸為y軸，即指定側軸大小的值為高度height值）為'auto'，則會被拉伸至盒子高度， 若如果指定側軸大小的屬性值為固定值則不會被拉伸）
案例：
代碼：
效果：
設置在容器上的屬性align-items: flex-start | flex-end | center | baseline | stretch（默認值）;（設置在容器上的對齊方式，會作用在所有子元素上）；
案例：
代碼：
效果：
上述代碼未添加任何對齊的樣式所有效果均為默認值
1.為wrapper（父級div）添加align-items:center; 代表所有子元素沿側軸居中，效果如下：
2.為wrapper（父級div）添加align-items: flex-end; 代表所有子元素沿側軸底部對齊，效果如下：
3.為wrapper（父級div）添加align-items: flex-start; 代表所有子元素沿側軸頂部對齊，效果如下：
4.為wrapper（父級div）添加align-items: baseline； 代表所有子元素沿第一行文字對齊，效果如下：
5.為wrapper（父級div）添加align-items: stretch；（所有字元素被拉伸以適應容器。如果子元素指定側軸大小的屬性值（默認側軸為y軸，即指定側軸大小的值為高度height值）為'auto'，則會被拉伸至盒子高度， 若子元素如果指定側軸大小的屬性值為固定值則不會被拉伸）
案例：
代碼：
效果：
由於未給demo指定高度，因此它的高度被拉伸為容器的高度，demo1設定了高度因此不會拉伸
如果設置align-items為其他的值 並且項目的高度未被設定則項目的高度由內容區撐開