Maketa paginii pe Flexbox
Acum să vedem cum să creăm un layout standard al paginii, care constă dintr-un header, un footer și o parte centrală, care are trei coloane: conținut principal și două sidebaruri.
Pentru aceasta, vom defini următoarea pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Flexbox în CSS3</title>
<style>
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
color: #fff;
font-size: 1.1em;
padding: 1em;
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
}
article {
background-color: #546e7a;
flex: 2 2 12em;
padding: 1em;
}
nav, aside {
flex: 1;
background-color: #455a64;
}
nav {
order: -1;
}
header, footer {
flex: 0 0 5em;
background-color: #37474f;
}
@media screen and (min-width: 600px) {
body {
min-height: 100vh;
}
main {
flex-direction: row;
min-height: 100%;
flex: 1 1 auto;
}
}
</style>
</head>
<body>
<header>
<p>Header</p>
</header>
<main>
<article>
<h1>Ce este Lorem Ipsum?</h1>
<p>Lorem Ipsum este un text de umplutură, des folosit în tipar și design web. Lorem Ipsum este standardul pentru texte în latină încă din secolul al XVI-lea. În acea vreme, un tipograf anonim a creat o mare colecție de dimensiuni și forme de fonturi, folosind Lorem Ipsum pentru a tipări mostre. Lorem Ipsum nu numai că a supraviețuit cinci secole fără schimbări notabile, dar a trecut și în designul electronic. Popularizarea sa în era modernă</p>
</article>
<nav>
<p>Navigare</p>
</nav>
<aside>
<p>Sidebar</p>
</aside>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Așadar, flex-containerul de nivel superior aici este elementul body. Flex-elementele sale sunt header, main și footer. Body dispune toate elementele sale de sus în jos în coloane. De asemenea, este de menționat că la o lățime de 600px și mai mare, pentru a umple întregul spațiu al browserului, body are setat stilul height: 100vh.
Elementele header și footer sunt similare. Proprietatea lor flex: 0 0 5em; indică faptul că, indiferent de schimbarea containerului, aceste elemente vor avea dimensiunea de 5em. Adică au o dimensiune statică.
Elementul main, care definește conținutul principal, este mai complex. Fiind un flex-element, este de asemenea un flex-container pentru elementele încorporate și gestionează poziționarea acestora. La o lățime a browserului de până la 600px, dispune elementele în coloane, ceea ce este foarte convenabil pe dispozitivele mobile.
La o lățime de 600px și mai mare, elementele încorporate nav, article și aside sunt dispuse în rânduri. Și, deoarece la această lățime a browserului, elementul părinte body umple toată înălțimea browserului, pentru a umple întreaga înălțime a containerului body la modificarea acestuia, elementul main are setată proprietatea flex: 1 1 auto;.
În elementele flex încorporate în main, este de remarcat că elementul de navigație nav și elementul sidebar aside vor avea dimensiuni egale la scalarea containerului. Iar elementul article, care conține conținutul principal, va fi corespunzător mai mare. Deși nav este definit după elementul article, datorită setării proprietății order: -1, blocul de navigare va fi plasat înaintea blocului article.