Az elrendezés összevont beállítása

A flex-flow összevont tulajdonság. A flex-direction és a flex-wrap tulajdonságok adhatók meg segítségével egy lépésben.

A flex-flow összevont tulajdonság:

kijelölő

{

flex-flow

flex-direction

flex-wrap

}

1. Példa:

Forráskód


<head>
...
      <style>
      ...
			.Elem {
				padding: 5px;
				border:1px solid #066;
				width:60px; height:18px;
				background-color:#fff;
				text-align:center;
			}			
			.divFlex {
				display: flex;	
				width:160px;	
				max-height:160px;		
			}	
			.flex-flow1 {
				flex-flow: row nowrap;
			}
			.flex-flow2 {
				flex-flow: row wrap;
			}
			.flex-flow3 {
				flex-flow: row wrap-reverse;
			}			
			.flex-flow4 {
				flex-flow: row-reverse nowrap;
			}	
			.flex-flow5 {
				flex-flow: row-reverse wrap;
			}
			.flex-flow6 {
				flex-flow: row-reverse wrap-reverse;
			}						
			.flex-flow7 {
				flex-flow: column nowrap;
			}	
			.flex-flow8 {
				flex-flow: column wrap;
			}
			.flex-flow9 {
				flex-flow: column wrap-reverse;
			}		
			.flex-flow10 {
				flex-flow: column-reverse nowrap;
			}	
			.flex-flow11 {
				flex-flow: column-reverse wrap;
			}
			.flex-flow12 {
				flex-flow: column-reverse wrap-reverse;
			}									
		</style>
	</head>
	<body> 
		<h2>flex-flow: row nowrap;</h2>	
		<div class="divFlex flex-flow1">
			<div class="Elem">1.</div>
			<div class="Elem">2.</div>
			<div class="Elem">3.</div>		
			<div class="Elem">4.</div>
			<div class="Elem">5.</div>
			<div class="Elem">6.</div>	
			<div class="Elem">7.</div>	
		</div>	
		<h2>flex-flow: row wrap;</h2>
		<div class="divFlex flex-flow2">
			...
		</div>	
		<h2>flex-flow: row wrap-reverse;</h2>
		<div class="divFlex flex-flow3">
			...
		</div>		
		<h2>flex-flow: row-reverse nowrap;</h2>
		<div class="divFlex flex-flow4">
			...
		</div>	
		<h2>flex-flow: row-reverse wrap;</h2>
		<div class="divFlex flex-flow5">
			...
		</div>	
		<h2>flex-flow: row-reverse wrap-reverse;</h2>
		<div class="divFlex flex-flow6">
			...
		</div>	
		<h2>flex-flow: column nowrap;</h2>
		<div class="divFlex flex-flow7">
			...
		</div>	
		<h2>flex-flow: column wrap;</h2>
		<div class="divFlex flex-flow8">
			...
		</div>
		<h2>flex-flow: column wrap-reverse;</h2>
		<div class="divFlex flex-flow9">
			...
		</div>		
		<h2>flex-flow: column-reverse nowrap;</h2>
		<div class="divFlex flex-flow10">
			...	
		</div>	
		<h2>flex-flow: column-reverse wrap;</h2>
		<div class="divFlex flex-flow11">
			...
		</div>
		<h2>flex-flow: column-reverse wrap-reverse;</h2>
		<div class="divFlex flex-flow12">
			...
		</div>					
	</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: flexi14.html