Alinierea elementelor - justify-content
Uneori ne putem confrunta cu faptul că spațiul flex-containerelor diferă ca dimensiune de spațiul necesar pentru flex-elemente. De exemplu:
- flex-elementele nu utilizează tot spațiul flex-containerului
- flex-elementele necesită mai mult spațiu decât este disponibil în flex-container. În acest caz, elementele depășesc limitele containerului
Pentru a gestiona aceste situații, putem aplica proprietatea justify-content. Aceasta aliniază elementele de-a lungul axei principale - main axis (în cazul dispunerii sub formă de rânduri pe orizontală, în cazul dispunerii sub formă de coloane - pe verticală) și poate lua următoarele valori:
- flex-start: valoarea implicită, în care primul element este aliniat la marginea stângă a containerului (în cazul dispunerii sub formă de rânduri) sau la partea de sus (în cazul dispunerii sub formă de coloane), urmat de al doilea element și așa mai departe
- flex-end: ultimul element este aliniat la marginea dreaptă (în cazul dispunerii sub formă de rânduri) sau la partea de jos (în cazul dispunerii sub formă de coloane) a containerului, urmat de penultimul element și așa mai departe
- center: elementele sunt aliniate la centru
- space-between: dacă în rând există un singur element sau elementele depășesc limitele flex-containerului, această valoare este similară cu flex-start. În celelalte cazuri, primul element este aliniat la marginea stângă (în cazul dispunerii sub formă de rânduri) sau la partea de sus (în cazul dispunerii sub formă de coloane), iar ultimul element - la marginea dreaptă a containerului (în cazul dispunerii sub formă de rânduri) sau la partea de jos (în cazul dispunerii sub formă de coloane). Tot spațiul rămas între ele este distribuit uniform între celelalte elemente
- space-around: dacă în rând există un singur element sau elementele depășesc limitele containerului, acțiunea sa este similară cu valoarea center. În caz contrar, elementele distribuie uniform spațiul între marginile stângă și dreaptă ale containerului, iar distanța dintre primul și ultimul element și marginile containerului reprezintă jumătate din distanța dintre elemente
Alinierea pentru dispunerea elementelor sub formă de rânduri:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
border:1px #ccc solid;
}
.flex-end{
justify-content: flex-end;
}
.center{
justify-content: center;
}
.space-between{
justify-content: space-between;
}
.space-around{
justify-content: space-around;
}
.flex-item {
text-align:center;
font-size: 1em;
padding: 1.5em;
color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
.color4 {background-color: #2A9FBC;}
.color5 {background-color: #F15B2A;}
</style>
</head>
<body>
<h3>Flex-end</h3>
<div class="flex-container flex-end">
<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 class="flex-item color4">Flex Item 4</div>
</div>
<h3>Center</h3>
<div class="flex-container center">
<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 class="flex-item color4">Flex Item 4</div>
</div>
<h3>Space-between</h3>
<div class="flex-container space-between">
<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 class="flex-item color4">Flex Item 4</div>
</div>
<h3>Space-around</h3>
<div class="flex-container space-around">
<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 class="flex-item color4">Flex Item 4</div>
</div>
</body>
</html>
Alinierea la dispunerea sub formă de coloane:
