Gyermekelem összevont beállítása

A flex összevont tulajdonság. A flex-grow, flex-shrink és flex-basis tulajdonságok adhatók meg segítségével egy lépésben.

A flex összevont (shorthand) tulajdonság:

kijelölő

{

flex

flex-grow

flex-shrink

flex-basis;

}

1. Példa:

Forráskód


<head>
...
      <style>
      ...
			
			.Elem {
				padding: 0px;
				border:1px solid #066;				
				background-color:#fff;
				text-align:center;
			}			
			.divFlex {
				display: flex;	
				justify-content: space-between;		
				padding:0;	
				background-color:#ddd;
				border:1px solid #aaa;
			}	
			.flex1 {
				flex: 1 0 50px;
			}	
			.flex2 {
				flex: 0 0 80px;
			}	
			.flex3 {
				flex: 0 1 110px;
			}							
		</style>
	</head>
	<body> 
		<h2>Zsugorítva: </h2>
		<div class="divFlex" style="width:200px">
			<div class="Elem flex1">
				<p>1<br>0<br>50px</p>
			</div>
			<div class="Elem flex2">
				<p>0<br>0<br>80px</p>
			</div>
			<div class="Elem flex3">
				<p>0<br>1<br>110 px</p>
			</div>
		</div>			
		<h2>Normál méret: </h2>
		<div class="divFlex" style="width:246px">
			<div class="Elem flex1">
				<p>1<br>0<br>50px</p>
			</div>
			<div class="Elem flex2">
				<p>0<br>0<br>80px</p>
			</div>
			<div class="Elem flex3">
				<p>0<br>1<br>110 px</p>
			</div>
		</div>	
		<h2>Nyújtva: </h2>
		<div class="divFlex" style="width:300px">
			<div class="Elem flex1">
				<p>1<br>0<br>50px</p>
			</div>
			<div class="Elem flex2">
				<p>0<br>0<br>80px</p>
			</div>
			<div class="Elem flex3">
				<p>0<br>1<br>110 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ő: flexi12.html