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

定义:属性定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

例子演示

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: stretch

代码清单

HTML代码

		
<h3>align-content: flex-start</h3>
<ul class="flex-container container-18">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

<h3>align-content: flex-end</h3>
<ul class="flex-container container-19">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-content: center</h3>
<ul class="flex-container container-20">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-content: space-between</h3>
<ul class="flex-container container-21">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-content: space-around</h3>
<ul class="flex-container container-22">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>align-content: stretch</h3>
<ul class="flex-container container-23">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
		
	

CSS代码

		
.container-18{align-content: flex-start;height: 24rem;flex-wrap: wrap}
.container-19{align-content: flex-end;height: 24rem;flex-wrap: wrap}
.container-20{align-content: center;height: 24rem;flex-wrap: wrap;}
.container-21{align-content: space-between;height: 24rem;flex-wrap: wrap}
.container-22{align-content: space-around;height: 24rem;flex-wrap: wrap}
.container-23{align-content: stretch;height: 24rem;flex-wrap: wrap}