Gyermek elem referenciamérete

A flex-basis tulajdonság segítségével a gyermekelem hosszának referenciaértéke adható meg.

szám és mértékegység: A méret megadása.
auto: Az elem hossza a tartalmának megfelelő lesz. (alapértelmezett)
initial: Az alapértelmezett érték beállítása.
inherit: A tulajdonságot a szülő elemtől örökli.

Ha egy gyermekelem nem rugalmas elem, akkor a flex-basis tulajdonságnak nincs hatása.

A gyermekek referenciaméretének beállítása:

kijelölő

{

flex-basis

szám/kulcsszó;

}

1. Példa:

Forráskód


<head>
...
      <style>
      ...
			.Elem {
				padding: 5px;
				border:1px solid #066;				
				background-color:#fff;
				text-align:center;
			}			
			.divFlex {
				display: flex;	
				justify-content: space-between;			
			}	
			.flex-basis1 {
				flex-basis: 100px;
			}	
			.flex-basis2 {
				flex-basis: 200px;
			}	
			.flex-basis {
				flex-basis: 50px;
			}							
		</style>
	</head>
	<body> 
		<h2>flex-basis: </h2>
		<div class="divFlex">
			<div class="Elem flex-basis1">
				<p>100 px</p>
			</div>
			<div class="Elem flex-basis1">
				<p>100 px</p>
			</div>
			<div class="Elem flex-basis1">
				<p>100 px</p>
			</div>
		</div>	
		<h2>flex-basis:</h2>
		<div class="divFlex">
			<div class="Elem flex-basis1">
				<p>100 px</p>
			</div>
			<div class="Elem flex-basis2">
				<p>200 px</p>
			</div>
			<div class="Elem flex-basis1">
				<p>100 px</p>
			</div>
		</div>	
		<h2>flex-basis:</h2>
		<div class="divFlex">
			<div class="Elem flex-basis5">
				<p>50 px</p>
			</div>
			<div class="Elem flex-basis2">
				<p>200 px</p>
			</div>
			<div class="Elem flex-basis1">
				<p>100 px</p>
			</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ő: flexi10.html