FlexBox kétoszlopos elrendezés

Kétoszlopos responsive oldalfelépítés

Az egyoszlopos elrendezés középső elemét egy flex konténerre cseréljük, amelybe 2 gyermekelem kerül (nav és main).
Az oszlopok sorrendjét csupán a nav és main elemek order tulajdonságának módosításával oldjuk meg. (A HTML sorrend változatlan.)

1. Példa:

Forráskód


<head>
...
      <style>
      ...
			.divOldal {
				display: flex;
				flex-direction: column;
				height: 100vh;
			}
			header,
			footer {
				background: #003838;
				padding: 4px;
				color: #fff;
				text-align: center;
				flex-shrink: 0;				
			}
			footer {
				margin-top: 20px;
			}			
			main {
				padding: 0px 4px;
				order: 2;
				width:100%;
			}	
			.divTartalom {
				flex: 1 0 auto;
				padding: 10px 2px;
				margin: 2px 4px;
				display: flex;
				flex-direction: row;
			}
			nav {
				width:240px;
				max-width:320px;
				order: 1;				
			}
			.aMenu	{
				display:block;
				width:100px;
				padding: 5px 10px;
				margin:3px 8px 3px 3px;	
				border-bottom:1px solid #ddd;			
			}				
		</style>
	</head>
	<body> 
		<div class="divOldal">
			<header>
				<h2>Fejléc</h2>			
			</header>	
			<div class="divTartalom">
				<nav>
					<h2>Menü</h2>	
					<a class="aMenu">1. menüpont</a>
					<a class="aMenu">2. menüpont</a>
					<a class="aMenu">3. menüpont</a>
				</nav>
				<main>
					<h2>Tartalom</h2>
					<p>Lorem ipsum ... </p>			
				</main>		
			</div>		
			<footer>
				<h2>Lábléc</h2>		
			</footer>		
		</div>

Eredmény 1.*

Eredmény 2.*

* 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_1.html és flexi_oldalfelepites_2.html