Proprietatea CSS justify-content
De-a lungul axei principale (orizontal), elementele flex sunt poziționate de justify-content.
Îi poți da oricare dintre aceste valori:
centerflex-start(implicit)flex-endspace-aroundspace-betweenspace-evenly
Center
Cu center, elementele flex se adună la mijlocul containerului.
Prompt
Creează un container flex cu trei elemente numerotate (1, 2, 3) și folosește justify-content: center pentru a le alinia în centrul containerului. Stilizează containerul cu un fundal gri deschis, iar elementele cu o culoare de fundal distinctă și un padding.
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>Flexbox justify-content: center</title>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: center</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex-start
Obții flex-start fără să setezi nimic, deoarece este valoarea implicită: elementele flex se aliniază de la începutul containerului.
Prompt
Creați un container flex cu trei elemente numerotate (1, 2, 3) și utilizați justify-content: flex-start pentru a le alinia la începutul containerului. Stilizați containerul cu un fundal gri deschis și elementele cu o culoare de fundal distinctă și puțin padding.
Rezultat: 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>Flexbox justify-content: flex-start</title>
<style>
.flex-container {
display: flex;
justify-content: flex-start;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: flex-start</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex-end
Folosirea flex-end împinge elementele flex la capătul containerului.
Prompt
Creează un container flex cu trei elemente numerotate (1, 2, 3) și folosește justify-content: flex-end pentru a le alinia la finalul containerului. Stilizează containerul cu un fundal gri deschis, iar elementele cu o culoare de fundal distinctă și un padding.
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>Flexbox justify-content: flex-end</title>
<style>
.flex-container {
display: flex;
justify-content: flex-end;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: flex-end</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-around
La space-around, fiecare element flex are spațiu înainte și după el, deci și între el și vecinii lui.
Prompt
Creați un container flex cu trei elemente numerotate (1, 2, 3) și utilizați justify-content: space-around pentru a le afișa cu spațiu egal în jurul fiecărui element. Stilizați containerul cu un fundal gri deschis și elementele cu o culoare de fundal distinctă și puțin padding.
Rezultat: 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>Flexbox justify-content: space-around</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-around</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-between
Cu space-between, primul element stă la început, ultimul la sfârșit, iar spațiul rămas se împarte între elemente.
Prompt
Creați un container flex cu trei elemente numerotate (1, 2, 3) și utilizați justify-content: space-between pentru a le afișa cu spațiu egal între elemente. Stilizați containerul cu un fundal gri deschis și elementele cu o culoare de fundal distinctă și puțin padding.
Rezultat: 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>Flexbox justify-content: space-between</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-between</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-evenly
La space-evenly, spațiile din jurul și dintre elementele flex sunt toate egale.
Prompt
Creați un container flex cu trei elemente numerotate (1, 2, 3) și utilizați justify-content: space-evenly pentru a le afișa cu spațiu egal în jurul și între fiecare element. Stilizați containerul cu un fundal gri deschis și elementele cu o culoare de fundal distinctă și puțin padding.
Rezultat: 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>Flexbox justify-content: space-evenly</title>
<style>
.flex-container {
display: flex;
justify-content: space-evenly;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-evenly</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>