Gyermekek vízszintes igazítása

A justify-content tulajdonság segítségével a flex konténerben a gyermek elemek vízszintesen igazíthatók:

flex-start: A flex konténer elejére (balra) igazítva. (alapértelmezett)
flex-end: A flex konténer végére (jobbra) igazítva.
center: A flex konténer közepére (középre) igazítva.
space-between: Az elemek arányosan eloszlanak a sorban, egyenlő helyet hagyva egymás között. Az első elem a flex konténer legelején, az utolsó a legvégén helyezkedik el.
space-around: Az elemek egyenlően eloszlanak a sorban, de a közöttük lévő hely nem egyenlő. Az első és utolsó elemek 1 egységnyi helyet hagy a flex konténer széléhez képest. Az elemek között 2 egységnyi hely van.
space-evenly: Az elemek arányosan eloszlanak a sorban, egyenlő helyet hagyva egymáshoz és a flex konténerhez képest is.

A gyermekek vízszintes igazításának beállítása:

kijelölő

{

justify-content

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;				
			}	
			.flex-start {
				justify-content: flex-start;
			}
			.flex-end {
				justify-content: flex-end ;
			}
			.center {
				justify-content: center;
			}
			.space-between {
				justify-content: space-between;
			}	
			.space-around {
				justify-content: space-around;
			}	
			.space-evenly {
				justify-content: space-evenly;
			}				
		</style>
	</head>
	<body> 
		<h2>justify-content: flex-start</h2>	
		<div class="divFlex flex-start">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem</div>
			<div class="Elem">3. elem</div>		
		</div>	
		<h2>justify-content: flex-end</h2>
		<div class="divFlex flex-end">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem</div>
			<div class="Elem">3. elem</div>		
		</div>	
		<h2>justify-content: center</h2>
		<div class="divFlex center">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem</div>
			<div class="Elem">3. elem</div>		
		</div>	
		<h2>justify-content: space-between</h2>
		<div class="divFlex space-between">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem</div>
			<div class="Elem">3. elem</div>		
		</div>	
		<h2>justify-content: space-around</h2>
		<div class="divFlex space-around">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem</div>
			<div class="Elem">3. elem</div>		
		</div>		
		<h2>justify-content: space-evenly</h2>
		<div class="divFlex space-evenly">
			<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ő: flexi3.html