Alinierea elementelor - align-items și align-self
Proprietatea align-items
Proprietatea align-items aliniază, de asemenea, elementele, dar deja pe axa transversală (axa de traversare) (atunci când sunt dispuse într-o linie verticală, atunci când sunt dispuse într-o coloană - pe orizontală). Această proprietate poate lua următoarele valori:
- stretch: valoarea implicită, în care elementele flex sunt întinse pe întreaga înălțime (atunci când sunt dispuse într-o linie) sau pe întreaga lățime (atunci când sunt dispuse într-o coloană) a containerului flex
- flex-start: elementele sunt aliniate în partea de sus (atunci când sunt dispuse într-o linie) sau în partea stângă (atunci când sunt dispuse într-o coloană) a containerului flex
- flex-end: elementele sunt aliniate în partea de jos (atunci când sunt dispuse într-o linie) sau în partea dreaptă (atunci când sunt dispuse într-o coloană) a containerului flex
- center: elementele sunt aliniate în centrul containerului flex
- baseline: elementele sunt aliniate în conformitate cu linia lor de bază
Aliniere în dispunerea într-o linie:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
border:1px #ccc solid;
height:5em;
}
.flex-start{
align-items: flex-start;
}
.flex-end{
align-items: flex-end;
}
.center{
align-items: center;
}
.baseline{
align-items: baseline;
}
.flex-item {
text-align:center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.largest-item{
padding-top:2em;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
.color4 {background-color: #2A9FBC;}
</style>
</head>
<body>
<h3>Flex-start</h3>
<div class="flex-container flex-start">
<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>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>Baseline</h3>
<div class="flex-container baseline">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2 largest-item">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
<div class="flex-item color4">Flex Item 4</div>
</div>
</html>
Proprietatea align-items funcționează similar în cazul dispunerii pe coloană. De exemplu, schimbăm stilurile containerului flex astfel:
.flex-container {
display: flex;
border: 1px #ccc solid;
flex-direction: column;
width: 12em;
}Proprietatea align-self
Proprietatea align-self permite suprascrierea valorii proprietății align-items pentru un singur element. Aceasta poate avea toate valorile proprietății align-items plus valoarea auto:
- auto: valoarea implicită, în care elementul primește valoarea de la proprietatea align-items definită în containerul flex. Dacă în container acest stil nu este definit, se aplică valoarea stretch
- stretch: elementele se vor întinde automat pe axa transversală (de obicei verticală) pentru a umple tot spațiul disponibil. Este valoarea implicită. Funcționează doar dacă elementele nu au o dimensiune fixă setată (ex: înălțime)
- flex-start: aliniază elementele la începutul axei transversale – adică în partea de sus a containerului, dacă axa transversală este verticală
- flex-end: aliniază elementele la finalul axei transversale – adică în partea de jos a containerului, dacă axa transversală este verticală
- center: liniază toate elementele în centrul axei transversale, adică le așază pe mijlocul containerului (vertical sau orizontal, în funcție de direcția flex)
- baseline: aliniază elementele în funcție de linia de bază a textului. Este util când ai mai multe elemente cu texte și vrei ca textul să fie aliniat frumos, indiferent de dimensiunea elementelor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox în CSS3</title>
<style>
.flex-container {
display: flex;
border: 1px #ccc solid;
justify-content: space-between;
align-items: stretch;
height: 12em;
}
.flex-item {
text-align: center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.item1 { background-color: #675BA7; align-self: center; }
.item2 { background-color: #9BC850; align-self: flex-start; }
.item3 { background-color: #A62E5C; align-self: flex-end; }
.item4 { background-color: #2A9FBC; align-self: center; }
</style>
</head>
<body>
<h3>Align-self</h3>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
<div class="flex-item item4">Flex Item 4</div>
</div>
</body>
</html>Aici, pentru containerul flex, este setată întinderea pe înălțime cu ajutorul valorii align-items: stretch;. Totuși, fiecare dintre elemente suprascrie acest comportament:
