小说排行榜完结版,欢乐颂小说在线阅读,欢乐颂第二季

語法：

align-items：flex-start | flex-end | center | baseline | stretch

默認值：stretch

適用于：flex容器

繼承性：無

動畫性：是

計算值：指定值

取值：

flex-start：: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：: 彈性盒子元素的側軸（縱軸）結束位置的邊界緊靠住該行的側軸結束邊界。
center：: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：: 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：: 如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

說明：

定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

對應的腳本特性為alignItems。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-10.0	2.0-21.0	4.0-20.0	6.0	15.0+^-webkit-	6.0-6.1	2.1-4.3	18.0-19.0
	11.0+	22.0+	21.0+^-webkit-	6.1+^-webkit-	17.0+	7.0+^-webkit-	4.4+	20.0+^-webkit-
	11.0+	22.0+	29.0+	9.0+	17.0+	9.0+	4.4+	28.0+

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>align-items_CSS參考手冊_web前端開發參考手冊系列【CSS在線手冊-網站設計教程參考資料】</title>
<meta name="author" content="易網,網站設計,網站制作,網站建設,www.planaheadevents.com.cn" />
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{
	display:-webkit-flex;
	display:flex;
	width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
	-webkit-align-items:flex-start;
	align-items:flex-start;
}
#box2{
	-webkit-align-items:flex-end;
	align-items:flex-end;
}
#box3{
	-webkit-align-items:center;
	align-items:center;
}
#box4{
	-webkit-align-items:baseline;
	align-items:baseline;
}
#box5{
	-webkit-align-items:strecth;
	align-items:strecth;
}
</style>
</head>
<body>
<h1>align-items示例：</h1>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
</body>
</html>

本頁最后更新時間：

2015.8.10

免费的三级网站-免费的色网站-免费番茄社区性色大片-免费高清特级毛片-98色花堂永久地址国产精品-999国产精品

語法：

取值：

說明：

兼容性：

示例：

本頁最后更新時間：