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

定义:属性定义了Flex项目在主轴方向上的对齐方式

语法

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

例子演示

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

代码清单

HTML代码

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

<h3>justify-content: flex-end;</h3>
<ul class="flex-container container-9">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>justify-content: center;</h3>
<ul class="flex-container container-10">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>justify-content: space-between;</h3>
<ul class="flex-container container-11">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
		
	

CSS代码

		
.container-8{justify-content: flex-start;}
.container-9{justify-content: flex-end;}
.container-10{justify-content: center;}
.container-11{justify-content: space-between;}
.container-12{justify-content: space-around;}