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