logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

FlexBox egyoszlopos elrendezés



Egyszerű responsive oldalfelépítés

  • A body-n belül egy flex konténert helyezünk el, amelybe 3 gyermekelem kerül (header, main és footer).
  • A flex konténert magassága egyenlő a képernyő magasságával, így a footer akkor is az oldal látható területének aljára kerül, ha kevés a tartalom.

1. Példa:

Forráskód



<head>
...
      <style>
      ...
			body {
				margin:0;
				padding:0;				
			}
			.divOldal {
				display: flex;
				flex-direction: column;
				min-height: 100vh;
			}
			header,
			footer {
				background: #003838;
				padding: 4px;
				color: #fff;
				text-align: center;
				flex-shrink: 0;				
			}
			footer {
				margin-top: 20px;
			}			
			main {
				flex: 1 0 auto;
				padding: 20px;
			}		
		</style>
	</head>
	<!-- index.html -->
	<body> 
		<div class="divOldal">
			<header>
				<h2>Fejléc</h2>			
			</header>	
			<main>
				<h2>Tartalom</h2>
				<p>Lorem ipsum dolor sit amet, 
                   consectetur adipiscing elit, 
                   sed do eiusmod tempor incididunt 
                   ut labore et dolore magna aliqua.</p>			
			</main>			
			<footer>
				<h2>Lábléc</h2>		
			</footer>		
		</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ő: flexi_oldalfelepites.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.