logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

FlexBox gyermekeinek sorrendje



A order tulajdonság segítségével módosíthatjuk a gyermekelemek megjelenítésének sorrendjét. Minél kisebb értéket adunk meg, annál előrébb, minél nagyobbat, annál hátrább kerül az adott elem.

A gyermekek sorrendjének beállítása:

kijelölő
{
order
:
szám;
}

(Alapértelmezett érték=0.)

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;				
			}	
			.wrap {
				flex-wrap: wrap ;
			}
									
		</style>
	</head>
	<body> 
		<h2>Flexbox - order</h2>
		<div class="divFlex wrap">
			<div class="Elem" style="order:100">order:100</div>
			<div class="Elem" style="order:5">order:5</div>
			<div class="Elem" style="order:-1">order:-1</div>	
			<div class="Elem" style="order:77">order:77</div>
			<div class="Elem" style="order:0">order:0</div>
			<div class="Elem" style="order:15">order:15</div>	
			<div class="Elem" style="order:1">order:1</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ő: flexi6.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.