Proprietatea CSS align-items
Elementele flex sunt poziționate pe verticală, de-a lungul axei transversale, de proprietatea align-items.
Aceasta acceptă următoarele valori:
normal(implicit)stretchcenterflex-startflex-endbaseline
Center
Cu center, elementele flex sunt plasate la jumătatea înălțimii containerului.
Prompt
Creează un container flex cu o înălțime de 200px și trei elemente flex numerotate. Folosește align-items: center pentru a centra vertical elementele. Dă containerului un fundal deschis la culoare, iar fiecărui element o culoare de fundal distinctă.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: center</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: center</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Flex-start
Cu flex-start, elementele flex se aliniază la marginea de sus a containerului.
Prompt
Creează un container flex cu o înălțime de 200px și trei elemente flex numerotate. Folosește align-items: flex-start pentru a alinia elementele în partea de sus a containerului. Dă containerului un fundal deschis la culoare, iar fiecărui element o culoare de fundal distinctă.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: flex-start</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: flex-start</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Flex-end
Cu flex-end, elementele flex se aliniază la marginea de jos a containerului.
Prompt
Creează un container flex cu o înălțime de 200px și trei elemente flex numerotate. Folosește align-items: flex-end pentru a alinia elementele în partea de jos a containerului. Dă containerului un fundal deschis la culoare, iar fiecărui element o culoare de fundal distinctă.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: flex-end</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: flex-end</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Stretch
Cu stretch, elementele flex cresc până umplu containerul. Se comportă la fel ca valoarea implicită, normal.
Prompt
Creează un container flex cu o înălțime de 200px și trei elemente flex numerotate. Folosește align-items: stretch astfel încât elementele să umple întreaga înălțime a containerului. Dă containerului un fundal deschis la culoare, iar fiecărui element o culoare de fundal distinctă. Nu seta o înălțime pentru elemente.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: stretch</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: stretch</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Proprietatea CSS align-content
În timp ce align-items mută elementele, align-content mută chiar liniile flex, iar efectul său se vede doar atunci când elementele flex trec pe mai multe linii.
Aceasta acceptă următoarele valori:
stretch(implicit)centerflex-startflex-endspace-betweenspace-aroundspace-evenly
Center
Aici center adună liniile flex spre mijlocul containerului.
Prompt
Creează un container flex cu o înălțime de 400px, flex-wrap: wrap și align-content: center. Adaugă nouă elemente flex numerotate cu o lățime de aproximativ 33% astfel încât să treacă pe mai multe rânduri. Dă containerului un fundal deschis la culoare, iar fiecărui element o culoare de fundal distinctă.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content: center</title>
<style>
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
background-color: #f1f1f1;
}
.flex-container > div {
width: 30%;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-content: center</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
<div style="background-color:coral;">4</div>
<div style="background-color:lightblue;">5</div>
<div style="background-color:lightgreen;">6</div>
<div style="background-color:coral;">7</div>
<div style="background-color:lightblue;">8</div>
<div style="background-color:lightgreen;">9</div>
</div>
</body>
</html>
Space-between
Aici space-between lasă spațiu egal de la o linie flex la următoarea.
Prompt
Creează un container flex cu o înălțime de 400px, flex-wrap: wrap și align-content: space-between. Adaugă nouă elemente flex numerotate cu o lățime de aproximativ 33% astfel încât să treacă pe mai multe rânduri. Dă containerului un fundal deschis la culoare, iar fiecărui element o culoare de fundal distinctă.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content: space-between</title>
<style>
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: #f1f1f1;
}
.flex-container > div {
width: 30%;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-content: space-between</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
<div style="background-color:coral;">4</div>
<div style="background-color:lightblue;">5</div>
<div style="background-color:lightgreen;">6</div>
<div style="background-color:coral;">7</div>
<div style="background-color:lightblue;">8</div>
<div style="background-color:lightgreen;">9</div>
</div>
</body>
</html>
Centrare Reală cu Flexbox
Pentru a centra un element în ambele direcții sunt necesare două declarații pe containerul flex: justify-content: center și align-items: center. Astfel, elementul flex stă perfect la mijloc, atât pe orizontală, cât și pe verticală.
Exemplu
Prompt
Creează un container flex cu o înălțime de 400px care folosește atât justify-content: center, cât și align-items: center pentru a centra perfect un singur element flex. Elementul trebuie să afișeze textul „Centrare Reală”. Dă containerului un fundal deschis la culoare, iar elementului o culoare de fundal distinctă.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>True Centering With Flexbox</title>
<style>
.flex-container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
background-color: #f1f1f1;
}
.flex-container > div {
padding: 20px;
font-size: 30px;
color: white;
background-color: #4CAF50;
}
</style>
</head>
<body>
<h1>True Centering</h1>
<div class="flex-container">
<div>True Centering</div>
</div>
</body>
</html>