專業術語：

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為其他的值 并且項目的高度未被設定則項目的高度由內容區撐開

總結

以上是生活随笔為你收集整理的弹性盒子内容体居右对其_弹性盒子侧轴对齐方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。