css中align-self屬性的使用方法-創(chuàng)新互聯(lián)

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

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

css align-self屬性用于定義flex子項單獨在側軸（縱軸）方向上的對齊方式：拉伸以適應容器、位于容器的中心、位于容器的開頭、位于容器的結尾、位于容器的基線上。

css align-self屬性

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

作用：定義flex子項單獨在側軸（縱軸）方向上的對齊方式。

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

語法

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

屬性值：

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

css中align-self屬性的使用方法

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

css中align-self屬性的使用方法

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

css中align-self屬性的使用方法

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

css中align-self屬性的使用方法

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

css中align-self屬性的使用方法

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

css中align-self屬性的使用方法

css align-self屬性使用示例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.flex-container {
				padding: 0;
				margin: 0;
				list-style: none;
				height: 200px;
				display: flex;
			}
			
			.flex-start {
				align-self: flex-start;
			}
			
			.flex-end {
				align-self: flex-end;
			}
			
			.center {
				align-self: center;
			}
			
			.baseline {
				align-self: baseline;
			}
			
			.stretch {
				align-self: stretch;
			}
			
			.flex-item {
				background: tomato;
				padding: 5px;
				width: 100px;
				margin: 5px;
				line-height: 100px;
				color: white;
				font-weight: bold;
				font-size: 2em;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="box">
			<ul class="flex-container">
				<li class="flex-item flex-start">1</li>
				<li class="flex-item flex-end">2</li>
				<li class="flex-item center">3</li>
				<li class="flex-item baseline">4</li>
				<li class="flex-item stretch">5</li>
			</ul>
		</div>
	</body>

</html>

效果圖：

css中align-self屬性的使用方法

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

分享標題：css中align-self屬性的使用方法-創(chuàng)新互聯(lián)
網頁網址：http://www.rwnh.cn/article2/copcoc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、ChatGPT、品牌網站制作、微信公眾號、響應式網站、網站設計

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

css中align-self屬性的使用方法-創(chuàng)新互聯(lián)