Proprietățile Containerului Flex CSS
Aceste proprietăți se pun chiar pe elementul container flex:
display— are nevoie de valoareaflexsauinline-flexflex-direction— alege direcția în care sunt așezate elementele flexflex-wrap— decide dacă elementele flex pot trece pe rândul următorflex-flow— prescurtare care combinăflex-directionșiflex-wrapjustify-content— poziționează elementele flex pe axa principală (orizontal) atunci când lasă o parte din spațiul ei neocupatalign-items— poziționează elementele flex pe axa transversală (vertical) atunci când lasă o parte din spațiul ei neocupatalign-content— poziționează liniile flex atunci când elementele trec pe rândul următor și axa transversală are spațiu suplimentar
Proprietatea CSS flex-direction
Folosește flex-direction pentru a alege în ce sens merg elementele din interiorul unui container flex. Cele patru valori posibile sunt:
row(implicit)columnrow-reversecolumn-reverse
Direcția rând
Cu row, care se aplică implicit, elementele flex stau unul lângă altul, de la stânga la dreapta.
Prompt
Creează un container flex cu trei elemente numerotate (1, 2, 3) folosind flex-direction: row. Containerul trebuie să aibă fundal DodgerBlue, iar fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Row</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Direcția coloană
Cu column, elementele flex se stivuiesc vertical, începând de sus și terminând jos.
Prompt
Creează un container flex cu trei elemente numerotate (1, 2, 3) folosind flex-direction: column. Containerul trebuie să aibă fundal DodgerBlue, iar fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Column</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Direcția rând invers
Tot orizontal, row-reverse așază în schimb elementele flex de la dreapta la stânga.
Prompt
Creează un container flex cu trei elemente numerotate (1, 2, 3) folosind flex-direction: row-reverse. Containerul trebuie să aibă fundal DodgerBlue, iar fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Row Reverse</title>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Direcția coloană inversă
Tot vertical, column-reverse așază în schimb elementele flex de jos în sus.
Prompt
Creează un container flex cu trei elemente numerotate (1, 2, 3) folosind flex-direction: column-reverse. Containerul trebuie să aibă fundal DodgerBlue, iar fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Column Reverse</title>
<style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Proprietatea CSS flex-wrap
Când o linie flex nu are destul loc pentru toate elementele, flex-wrap decide dacă acestea trec pe alte linii. Poți alege dintre:
nowrap(implicit)wrapwrap-reverse
Nowrap
Implicit, nowrap păstrează toate elementele flex pe aceeași linie, fără să treacă pe rândul următor.
Prompt
Creează un container flex cu nouă elemente numerotate (de la 1 la 9) folosind flex-wrap: nowrap. Containerul trebuie să aibă fundal DodgerBlue și lățime de 200px. Fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Nowrap</title>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Wrap
Cu wrap, elementele flex trec pe linii noi ori de câte ori este nevoie.
Prompt
Creează un container flex cu nouă elemente numerotate (de la 1 la 9) folosind flex-wrap: wrap. Containerul trebuie să aibă fundal DodgerBlue și lățime de 200px. Fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Wrap</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Wrap invers
Și cu wrap-reverse elementele flex trec pe linii noi când este nevoie, doar că în ordine inversă.
Prompt
Creează un container flex cu nouă elemente numerotate (de la 1 la 9) folosind flex-wrap: wrap-reverse. Containerul trebuie să aibă fundal DodgerBlue și lățime de 200px. Fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Reverse</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Proprietatea CSS flex-flow
În loc să scrii separat flex-direction și flex-wrap, le poți seta pe amândouă într-o singură linie cu proprietatea prescurtată flex-flow.
Exemplu
Prompt
Creează un container flex cu trei elemente numerotate (1, 2, 3) folosind prescurtarea flex-flow setată la „row wrap”. Containerul trebuie să aibă fundal DodgerBlue, iar fiecare element trebuie să aibă fundal alb, margine de 10px, padding de 20px și dimensiune font de 30px.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Flow</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Subpagini pentru Containerul Flex
Încă două pagini continuă cu proprietățile containerului flex:
justify-content— alinierea orizontală a elementelor flexalign-itemsșialign-content— alinierea verticală și centrarea reală