align-items (适用于父类容器【弹性盒子】元素上)

定义：属性定义项目在交叉轴上的对齐方式

语法

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

例子演示

代码清单

HTML代码

		
<h3>align-items: space-around;</h3>
<ul class="flex-container container-12">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

<h3>align-items: flex-start;</h3>
<ul class="flex-container container-13">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
	<h3>align-items: flex-end;</h3>
<ul class="flex-container container-14">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-items: center;</h3>
<ul class="flex-container container-15">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-items: baseline;</h3>
	<ul class="flex-container container-16">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-items: stretch;</h3>
	<ul class="flex-container container-17">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
		
	

CSS代码

		
.container-13{align-items: flex-start;}
.container-13 li:nth-of-type(1){padding: 2rem 3rem}
.container-13 li:nth-of-type(2){padding: 1.5rem 3rem}
.container-13 li:nth-of-type(3){padding: 5rem 3rem}
.container-13 li:nth-of-type(5){padding: 1.5rem 3rem}

.container-14{align-items: flex-end;}
.container-14 li:nth-of-type(1){padding: 2rem 3rem}
.container-14 li:nth-of-type(2){padding: 1.5rem 3rem}
.container-14 li:nth-of-type(3){padding: 5rem 3rem}
.container-14 li:nth-of-type(5){padding: 1.5rem 3rem}

.container-15{align-items: center;}
.container-15 li:nth-of-type(1){padding: 2rem 3rem}
.container-15 li:nth-of-type(2){padding: 1.5rem 3rem}
.container-15 li:nth-of-type(3){padding: 5rem 3rem}
.container-15 li:nth-of-type(5){padding: 1.5rem 3rem}

.container-16{align-items: baseline;}
.container-16 li:nth-of-type(1){padding: 2rem 3rem}
.container-16 li:nth-of-type(2){padding: 1.5rem 3rem}
.container-16 li:nth-of-type(3){padding: 5rem 3rem}
.container-16 li:nth-of-type(5){padding: 1.5rem 3rem}

.container-17{align-items: stretch;}
.container-17 li:nth-of-type(1){padding: 2rem 3rem}
.container-17 li:nth-of-type(2){padding: 1.5rem 3rem}
.container-17 li:nth-of-type(3){padding: 5rem 3rem}
.container-17 li:nth-of-type(5){padding: 1.5rem 3rem}