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