css align-items属性怎样用？【html5教程】

css align-items属性是用于指定float容器内项目在横轴方向的对齐体式格局：拉伸以添补容器、以横轴为中间、在顶部垂直对齐、在底部垂直对齐、横轴的基线处对齐。【视频教程引荐：CSS教程】

CSS align-items属性

align-items属性是Flexible Box 规划模块的子属性。

作用：定义了怎样沿当前行的横轴安排弹性项目的默许（对齐）行动。

注：能够在float容器内的每一个子项目中运用align-self属性来掩盖align-items属性的款式。

语法：

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

stretch（默许）：拉伸以添补容器（依然尊敬最小宽度/最大宽度）。

center：项目以横轴为中间；默许情况下，横轴是垂直的，这意味着flexbox项目将垂直居中。

flex-start：项目在横轴的最先处对齐，即项目将在顶部垂直对齐。

flex-end：项目在横轴末尾对齐，即项目将在底部垂直对齐

baseline：项目在横轴的基线处对齐，即flexbox项目将本身对齐，以使其文本的基线沿水平线对齐。

CSS align-items属性的运用示例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.flex-container {
				padding: 0;
				margin: 0;
				list-style: none;
				-ms-box-orient: horizontal;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -moz-flex;
				display: -webkit-flex;
				display: flex;
				float: left;
			}
			
			.flex-start {
				-webkit-align-items: flex-start;
				align-items: flex-start;
			}
			
			.flex-end {
				-webkit-align-items: flex-end;
				align-items: flex-end;
			}
			
			.flex-end li {
				background: gold;
			}
			
			.center {
				-webkit-align-items: center;
				align-items: center;
			}
			
			.center li {
				background: deepskyblue;
			}
			
			.baseline {
				-webkit-align-items: baseline;
				align-items: baseline;
			}
			
			.baseline li {
				background: lightgreen;
			}
			
			.stretch {
				-webkit-align-items: stretch;
				align-items: stretch;
			}
			
			.stretch li {
				background: hotpink;
			}
			
			.flex-item {
				background: tomato;
				padding: 5px;
				width: 50px;
				margin: 5px;
				line-height: 50px;
				color: white;
				font-weight: bold;
				font-size: 2em;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="box">
			<ul class="flex-container flex-start">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container flex-end">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container center">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container baseline">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>

			<ul class="flex-container stretch">
				<li class="flex-item">1<br>2</li>
				<li class="flex-item">3</li>
				<li class="flex-item">4<br>5</li>
				<li class="flex-item">6</li>
			</ul>
		</div>
	</body>

</html>

效果图：