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

定义:属性可以控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向

语法

flex-wrap: nowrap | wrap | wrap-reverse;

例子演示

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

代码清单

HTML代码

		
<h3>flex-wrap: nowrap;</h3>
<ul class="flex-container container-5">
	<li>01</li>
	<li>02</li>
	<li>03</li>
	<li>04</li>
	<li>05</li>
	<li>06</li>
	<li>07</li>
	<li>08</li>
	<li>09</li>
	<li>10</li>
</ul>

<h3>flex-wrap: wrap;</h3>
<ul class="flex-container container-6">
	<li>01</li>
	<li>02</li>
	<li>03</li>
	<li>04</li>
	<li>05</li>
	<li>06</li>
	<li>07</li>
	<li>08</li>
	<li>09</li>
	<li>10</li>
</ul>
<h3>flex-wrap: wrap-reverse;</h3>
<ul class="flex-container container-7">
	<li>01</li>
	<li>02</li>
	<li>03</li>
	<li>04</li>
	<li>05</li>
	<li>06</li>
	<li>07</li>
	<li>08</li>
	<li>09</li>
	<li>10</li>
</ul>
		
	

CSS代码

		
.container-5{flex-wrap: nowrap;}
.container-6{flex-wrap: wrap;}
.container-7{flex-wrap: wrap-reverse;}