Gyermekek elrendezésének iránya

A flex-direction tulajdonság segítségével a flex konténerben a gyermek elemek sorban (row) (alapértelmezett), oszlopban (column), megfordított sorban (row-reverse), vagy megfordított oszlopban (column-reverse) rendezhetők el.

A gyermekek elrendezési irányának beállítása:

kijelölő

{

flex-direction

kulcsszó;

}

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;				
		}	
		.row {
			flex-direction: row;
		}
		.row-reverse {
			flex-direction: row-reverse ;
		}
		.column {
			flex-direction: column;
		}
		.column-reverse {
			flex-direction: column-reverse;
		}									
	</style>
</head>
<body> 
	<h2>flex-direction: row</h2>	
	<div class="divFlex row">
		<div class="Elem">1. elem</div>
		<div class="Elem">2. elem</div>
		<div class="Elem">3. elem</div>		
	</div>	
	<h2>flex-direction: row-reverse</h2>
	<div class="divFlex row-reverse">
		<div class="Elem">1. elem</div>
		<div class="Elem">2. elem</div>
		<div class="Elem">3. elem</div>		
	</div>	
	<h2>flex-direction: column</h2>
	<div class="divFlex column">
		<div class="Elem">1. elem</div>
		<div class="Elem">2. elem</div>
		<div class="Elem">3. elem</div>		
	</div>	
	<h2>flex-direction: column-reverse</h2>
	<div class="divFlex column-reverse">
		<div class="Elem">1. elem</div>
		<div class="Elem">2. elem</div>
		<div class="Elem">3. elem</div>		
	</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ő: flexi2.html