彈性盒子側軸對齊方式


專業術語:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM