Ce este Flexbox - Flex Container
Flexbox este denumirea generală pentru modulul Flexible Box Layout care există în CSS3. Acest modul definește un mod special de compunere/aranjare a interfeței utilizatorului, numit flex layout.
În acest sens, Flexbox oferă o abordare diferită pentru crearea interfeței utilizatorului, care diferă de compunerea în tabel sau bloc. O descriere detaliată a standardului pentru modul poate fi găsită în specificație.
Datorită Flexbox, este mai ușor să creezi interfețe complicate, complexe, unde putem schimba cu ușurință direcția și alinierea elementelor, să creăm reprezentări tabelare adaptive. În plus, Flexbox este destul de simplu de utilizat. Singura problemă care poate apărea la utilizarea acestuia este compatibilitatea între browsere.
De exemplu, în Internet Explorer suportul pentru Flexbox a apărut doar în ultima versiune - IE11. În același timp, toate browserele moderne, inclusiv Microsoft Edge, Opera, Google Chrome, Safari, Firefox, au suport complet pentru acest modul.
Principalele componente ale compunerii flexbox sunt flex-containerul și flex-elementele. Flex container reprezintă un anumit element în interiorul căruia sunt plasate flex-elementele.
Concepte de bază
Unul dintre conceptele cheie este main axis sau axa principală. Aceasta este o axă convențională în flex-container, de-a lungul căreia sunt poziționate flex-elementele.
Elementele din container pot fi aranjate orizontal sub formă de rând și vertical sub formă de coloană. În funcție de tipul de aranjare, axa principală se va schimba. Dacă aranjamentul este sub formă de rând, axa principală este orientată orizontal de la stânga la dreapta. Dacă aranjamentul este sub formă de coloană, axa principală este orientată vertical de sus în jos.
Termenii main start și main end descriu respectiv începutul și sfârșitul axei principale, iar distanța dintre ele este denumită main size.
Pe lângă axa principală, există și o axă transversală sau cross axis. Aceasta este perpendiculară pe axa principală. La aranjarea elementelor sub formă de rând, cross axis este orientată de sus în jos, iar la aranjarea sub formă de coloană este orientată de la stânga la dreapta.
Începutul axei transversale este denumit cross start, iar sfârșitul cross end. Distanța dintre ele este descrisă prin termenul cross size.
Adică, dacă elementele sunt aranjate într-un rând, main size va reprezenta lățimea containerului sau a elementelor, iar cross size - înălțimea lor. Dacă elementele sunt aranjate într-o coloană, main size reprezintă înălțimea containerului și a elementelor, iar cross size - lățimea lor.
Crearea unui flex-container
Pentru a crea un flex-container, trebuie să atribui proprietății stilului display una dintre cele două valori: flex sau inline-flex.
Vom crea o pagină web simplă care utilizează flexbox:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
}
.flex-item {
text-align: center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 { background-color: #675BA7; }
.color2 { background-color: #9BC850; }
.color3 { background-color: #A62E5C; }
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
</div>
</body>
</html>Pentru containerul flex-container a fost setată proprietatea display:flex. În el sunt plasate trei flex-elemente.
Dacă valoarea flex definește containerul ca element bloc, atunci valoarea inline-flex definește elementul ca element de linie (inline). Să examinăm ambele metode într-un exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
border: 2px solid #ccc;
}
.inline-flex-container {
display: inline-flex;
border: 2px solid #ccc;
margin-top: 10px;
}
.flex-item {
text-align: center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
</div>
<div class="inline-flex-container">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
</div>
</body>
</html>
În particular, în primul caz, flex-containerul se întinde pe lățimea paginii, iar în al doilea caz ocupă exact atât spațiu cât este necesar pentru flex-elemente.