flex布局之align-items

flex布局的align-items值有：flex-start，flex-end，center，stretch
其中flex-start表示：侧轴起始点对齐；
flex-end表示：侧轴终止点对齐
center表示：侧轴居中对齐
stretch:子元素可以拉伸到父元素的高度
html:

<div class="container">
	<section class="flex-start">
		<header>flex-start</header>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</section>
	
	<section class="flex-end">
		<header>flex-end</header>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</section>
	
	<section class="center">
		<header>center</header>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</section>
	
	<section class="stretch">
		<header>stretch</header>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</section>
</div>

css:

body {
	margin: 0;
	padding: 0;
	background-color: #fff;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.container {
	width: 1000px;
	margin: 0 auto;
}

.container header {
	padding: 20px;
          font-size: 24px;
          font-weight: bold;
}
ul {
	display: flex;
	min-height: 300px;
}
ul li {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	margin: 10px;
	background-color: pink;
}

.flex-start ul{
          align-items: flex-start;
          flex-wrap: wrap;
}
.flex-end ul{
	align-items: flex-end;
}

.center ul{
	align-items: center;
}

.stretch ul{
	align-items:stretch;

}
.stretch li{
	height: auto;
}

效果为：