這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹怎么用css align-items屬性，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)主打移動(dòng)網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、主機(jī)域名、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下，我們?yōu)榭蛻?hù)承諾穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì)，我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

css align-items屬性是用于指定float容器內(nèi)項(xiàng)目在橫軸方向的對(duì)齊方式：拉伸以填充容器、以橫軸為中心、在頂部垂直對(duì)齊、在底部垂直對(duì)齊、橫軸的基線處對(duì)齊。

CSS align-items屬性

align-items屬性是Flexible Box 布局模塊的子屬性。

作用：定義了如何沿當(dāng)前行的橫軸布置彈性項(xiàng)目的默認(rèn)（對(duì)齊）行為。

注：可以在float容器內(nèi)的每個(gè)子項(xiàng)目中使用align-self屬性來(lái)覆蓋align-items屬性的樣式。

語(yǔ)法：

align-items: stretch|center|flex-start|flex-end|baseline;

stretch（默認(rèn)）：拉伸以填充容器（仍然尊重最小寬度/最大寬度）。

center：項(xiàng)目以橫軸為中心；默認(rèn)情況下，橫軸是垂直的，這意味著flexbox項(xiàng)目將垂直居中 。

flex-start：項(xiàng)目在橫軸的開(kāi)始處對(duì)齊，即項(xiàng)目將在頂部垂直對(duì)齊。

flex-end：項(xiàng)目在橫軸末端對(duì)齊，即項(xiàng)目將在底部垂直對(duì)齊

baseline：項(xiàng)目在橫軸的基線處對(duì)齊，即flexbox項(xiàng)目將自身對(duì)齊，以使其文本的基線沿水平線對(duì)齊。

CSS align-items屬性的使用示例

	
		
		

	

	
		

			

				
1
2
				
3
				
4
5
				
6
			

			

				
1
2
				
3
				
4
5
				
6
			

			

				
1
2
				
3
				
4
5
				
6
			

			

				
1
2
				
3
				
4
5
				
6
			

			

				
1
2
				
3
				
4
5
				
6
			
		
	

效果圖：

關(guān)于怎么用css align-items屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。