這篇文章主要介紹了css中align-self屬性的使用方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

為沙坪壩等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及沙坪壩網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、沙坪壩網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

css align-self屬性用于定義flex子項(xiàng)單獨(dú)在側(cè)軸（縱軸）方向上的對齊方式：拉伸以適應(yīng)容器、位于容器的中心、位于容器的開頭、位于容器的結(jié)尾、位于容器的基線上。

css align-self屬性

align-self屬性是Flexible Box Layout模塊的子屬性。

作用：定義flex子項(xiàng)單獨(dú)在側(cè)軸（縱軸）方向上的對齊方式。

注意：align-self 屬性可重寫靈活容器的 align-items 屬性。

語法

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

屬性值：

auto：默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。

stretch：元素被拉伸以適應(yīng)容器。如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。

center：元素位于容器的中心。彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長度）。

flex-start：元素位于容器的開頭。彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。

flex-end：元素位于容器的結(jié)尾。彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

baseline：元素位于容器的基線上。如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

css align-self屬性使用示例

	
		
		

	

	
		

			

				
1
				
2
				
3
				
4
				
5
			
		
	

效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中align-self屬性的使用方法內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來學(xué)習(xí)!

分享文章：css中align-self屬性的使用方法-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/copcoc.html