Design cu mai multe coloane în Flexbox
Acum să vedem cum putem crea machete simple cu mai multe coloane pentru pagină folosind Flexbox.
Design cu două coloane
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
* {
box-sizing: border-box;
}
html body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
display: flex;
padding: 1em;
flex-direction: column;
}
.item {
background-color: #455a64;
color: #fff;
font-size: 1.1em;
padding: 1em;
}
.item:nth-child(even) {
background-color: #607d8b;
}
@media screen and (min-width: 600px) {
body {
flex-direction: row;
}
}
</style>
</head>
<body>
<div class="item">
<h2>Ce este Lorem Ipsum?</h2>
<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...</p>
</div>
<div class="item">
<h2>De unde provine?</h2>
<p>Mulți cred că Lorem Ipsum este un simplu text pseudo-latin, dar nu este chiar așa. Rădăcinile sale provin dintr-un fragment de latină clasică din anul 45 î.Hr...</p>
</div>
</body>
</html>Aici, flex-containerul este elementul body. Deoarece pe dispozitivele mobile (în special smartphone-uri) dimensiunea ecranului nu este foarte mare, stabilim implicit dispunerea elementelor pe coloane. Cu toate acestea, pentru dispozitivele cu ecran de la 600px și mai mare, se aplică regula media-query, care stabilește dispunerea în rânduri.
Design cu trei coloane
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
* {
box-sizing: border-box;
}
html body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
display: flex;
padding: 1em;
flex-direction: column;
}
.item {
background-color: #455a64;
color: #fff;
font-size: 1.1em;
padding: 1em;
flex: 1;
}
.item:nth-child(1) {
background-color: #607d8b;
}
@media screen and (min-width: 600px) {
body {
flex-direction: row;
}
.item:nth-child(2) {
order: -1;
}
}
</style>
</head>
<body>
<div class="item">
<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...</p>
</div>
<div class="item">
<h3>Textul clasic Lorem Ipsum, folosit din secolul al XVI-lea</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
<div class="item">
<h3>Unde îl găsești?</h3>
<p>Există multe variante de Lorem Ipsum, dar majoritatea au suferit modificări, cum ar fi inserțiile umoristice sau cuvinte care nu au nicio legătură cu latina.</p>
</div>
</body>
</html>Spre deosebire de exemplul anterior, aici a fost adăugat încă un element. Caracteristica acestui exemplu este că coloanele au dimensiuni egale. Pentru aceasta, li s-a stabilit proprietatea flex: 1, ceea ce înseamnă că, la extinderea sau micșorarea limitelor containerului, toate elementele vor fi scalate în mod egal.
În plus, la o lățime a ecranului mai mare de 600px, al doilea element are setată proprietatea order: -1, ceea ce face ca acest element să fie plasat primul.
În mod similar, putem adăuga și mai multe coloane. În acest caz, coloanele au implicit aceeași lățime. Dar ce facem dacă una dintre coloane (de obicei cea centrală) trebuie să aibă o lățime mai mare decât celelalte? Pentru aceasta, adăugăm următoarea regulă în stilurile paginii:
.item:first-child {
flex: 0 0 50%;
}În acest caz, primul element va ocupa întotdeauna 50% din spațiul containerului.
