Több soros függőleges igazítás - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

A align-content tulajdonság segítségével a több soros megjelenítésnél beállíthatjuk, hogy a sorok függőlegesen hogyan helyezkednek el egymáshoz képest.

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.
space-between: A sorok függőlegesen arányosan oszlanak el, egyenlő helyet hagyva egymás között. Az első sor a flex konténer legelején (tetején), az utolsó a legvégén (alján) helyezkedik el.
space-around: A sorok függőlegesen arányosan oszlanak el, egyenlő helyet hagyva egymás között. Az első és utolsó sorok 1 egységnyi helyet hagynak a flex konténer széléhez (tetejéhez és aljához) képest. A sorok között 2 egységnyi hely van.
stretch: A sorok méretét a rendelkezésre álló magasságra nyújtja. (alapértelmezett)

Több soros függőleges igazítás:

kijelölő

{

align-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-wrap: wrap ;
				min-height:120px;			
			}	
			.flex-start {
				align-content: flex-start;
			}
			.flex-end {
				align-content: flex-end;
			}
 

 

			.center {
				align-content: center;
			}
			.space-between {
				align-content: space-between;
			}
			.space-around {
				align-content: space-around;
			}
			.stretch {
				align-content: stretch;
			}
								
		</style>
	</head>
	<body> 
 

		<h2>align-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 class="Elem">4. elem</div>
			<div class="Elem">5. elem</div>
			<div class="Elem">6. elem</div>	
			<div class="Elem">7. elem</div>	
		</div>	
		<h2>align-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 class="Elem">4. elem</div>
			<div class="Elem">5. elem</div>
			<div class="Elem">6. elem</div>	
			<div class="Elem">7. elem</div>	
		</div>
		
		<h2>align-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 class="Elem">4. elem</div>
			<div class="Elem">5. elem</div>
			<div class="Elem">6. elem</div>	
			<div class="Elem">7. elem</div>	
		</div>
		<h2>align-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 class="Elem">4. elem</div>
			<div class="Elem">5. elem</div>
			<div class="Elem">6. elem</div>	
			<div class="Elem">7. elem</div>	
		</div>
		<h2>align-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 class="Elem">4. elem</div>
			<div class="Elem">5. elem</div>
			<div class="Elem">6. elem</div>	
			<div class="Elem">7. elem</div>	
		</div>
		<h2>align-content: stretch</h2>
		<div class="divFlex stretch">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem</div>
			<div class="Elem">3. elem</div>	
			<div class="Elem">4. elem</div>
			<div class="Elem">5. elem</div>
			<div class="Elem">6. elem</div>	
			<div class="Elem">7. 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ő: flexi11.html