Rugalmas doboz létrehozása

A flexbox-os elrendezés nagy mértékben megkönnyíti a responsive weblapok készítését.

A display: flex; beállítással létrehozhatunk egy rugalmas konténert, amelynek mérete a rendelkezésre álló képernyő mérethez igazodik.

Gyermek elemei:

elrendezhetők bármilyen haladási irányban ( jobbra, balra, lefelé, felfelé ),
elhelyezhetők egy vagy több sorban,
a rugalmas konténerhez és egymáshoz képest is többféleképpen igazíthatók,
a rugalmas konténer méretének változásakor automatikusan változtathatják méretüket.

1. Példa:

Forráskód


 

<head> 
...	
<style>
...
  .Elem {
    padding:5px;
    border:1px solid #066;
    background-color:#fff;
  }
 .divBlock {
    display: block;
  }	
  .divFlex {
    display: flex;
    flex-direction: row;
  }	
</style>
</head>
	<body> 
		<h2>display: block</h2>
		<div class="divBlock">
			<div class="Elem">1. elem</div>
			<div class="Elem">2. elem</div>
			<div class="Elem">3. elem</div>		
		</div>
		<h2>display: flex</h2>	
		<div class="divFlex">
			<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ő: flexi1.html