Gyermekek függőleges igazítása

A align-items tulajdonság segítségével a flex konténerben a gyermek elemek függőlegesen igazíthatók:

flex-start: A flex konténer elejére (felülre) igazítva.
flex-end: A flex konténer végére (alulra) igazítva.
center: A flex konténer közepére (középre) igazítva.
baseline: Az elemek a baseline-hoz igazodnak.
stretch: Az elemek méretét a rendelkezésre álló magasságra nyújtja. (alapértelmezett)

A gyermekek függőleges igazításának beállítása:

kijelölő

{

align-items

kulcsszó;

}

1. Példa:

Forráskód


<head>
...
  <style>
  ...
			.Elem {
				padding:5px;
				border:1px solid #066;
				width:60px; 
				background-color:#fff;
				text-align:center;
			}			
			.divFlex {
				display: flex;				
			}	
			.stretch {
				align-items: stretch;
			}
			.flex-start {
				align-items:flex-start ;
			}
			.flex-end {
				align-items: flex-end;
			}
			.center {
				align-items: center;
			}	
			.baseline {
				align-items: baseline;
			}					
		</style>
	</head>
	<body> 
		<h2>align-items: stretch</h2>	
		<div class="divFlex stretch">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem<br>magas</div>
			<div class="Elem">3. elem<br>még<br>magasabb</div>	
			<div class="Elem">4. elem</div>		
		</div>	
		<h2>align-items: flex-start</h2>
		<div class="divFlex flex-start">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem<br>magas</div>
			<div class="Elem">3. elem<br>még<br>magasabb</div>	
			<div class="Elem">4. elem</div>		
		</div>	
		<h2>align-items: flex-end</h2>
		<div class="divFlex flex-end">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem<br>magas</div>
			<div class="Elem">3. elem<br>még<br>magasabb</div>	
			<div class="Elem">4. elem</div>		
		</div>	
		<h2>align-items: center</h2>
		<div class="divFlex center">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem<br>magas</div>
			<div class="Elem">3. elem<br>még<br>magasabb</div>	
			<div class="Elem">4. elem</div>			
		</div>	
		<h2>align-items: baseline</h2>
		<div class="divFlex baseline">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem<br>magas</div>
			<div class="Elem">3. elem<br>még<br>magasabb</div>	
			<div class="Elem">4. 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ő: flexi4.html