Elemente Flex CSS
Orice element plasat direct într-un container flex devine element flex, fără altă intervenție.
Acestea sunt proprietățile disponibile pentru elementele flex:
order— stabilește locul în care apare un element în ordinea de afișare din containerflex-grow— stabilește cât de mult se extinde un element față de elementele vecineflex-shrink— stabilește cât de mult se micșorează un element față de elementele vecineflex-basis— îi dă unui element lungimea de la care porneșteflex— combinăflex-grow,flex-shrinkșiflex-basisîntr-o singură formă prescurtatăalign-self— aliniază un anumit element din interiorul containerului
Proprietatea CSS order
Ordinea din cod și ordinea vizuală pot fi diferite: elementul flex care apare primul în cod nu trebuie să apară neapărat primul în aspect. În interiorul containerului flex, order decide succesiunea.
Trebuie să primească un număr, iar acest număr este implicit 0.
Exemplu
Fiecare element de mai jos are o valoare order care îi stabilește locul în aspect:
Prompt
Creați un container flex cu patru elemente etichetate de la 1 la 4. Utilizați proprietatea CSS order pentru a le afișa în ordinea: 4, 2, 1, 3 (elementul 1 are order 3, elementul 2 are order 2, elementul 3 are order 4, elementul 4 are order 1).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS order Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The order Property</h1>
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
</body>
</html>
Proprietatea CSS flex-grow
Numărul dat proprietății flex-grow spune cât de mult se extinde un element față de elementele vecine.
Aici este valid doar un număr, iar valoarea implicită este 0.
Exemplu
Aici, al treilea element crește de patru ori mai repede decât cele două elemente vecine:
Prompt
Creați un container flex cu trei elemente. Dați elementelor 1 și 2 un flex-grow de 1, iar elementului 3 un flex-grow de 4, astfel încât acesta să crească de patru ori mai repede decât celelalte.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-grow Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 4">3</div>
</div>
</body>
</html>
Proprietatea CSS flex-shrink
Numărul dat proprietății flex-shrink spune cât de mult se micșorează un element față de elementele vecine.
Din nou este valid doar un număr, dar de data aceasta valoarea implicită este 1.
Exemplu
Aici, al treilea element se micșorează de două ori mai mult decât toate celelalte:
Prompt
Creați un container flex cu șase elemente etichetate de la 1 la 6. Setați lățimea fiecărui element la 100px. Dați celui de-al treilea element o valoare flex-shrink de 2, astfel încât să se micșoreze de două ori mai mult decât celelalte.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-shrink Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Proprietatea CSS flex-basis
Lungimea inițială a unui element vine de la flex-basis.
Exemplu
Aici, al treilea element pornește de la o lungime de 250 de pixeli:
Prompt
Creați un container flex cu patru elemente. Setați al treilea element să aibă un flex-basis de 250px, oferindu-i o lungime inițială mai mare decât celelalte elemente.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-basis Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-basis Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 250px">3</div>
<div>4</div>
</div>
</body>
</html>
Proprietatea CSS flex
În loc de trei declarații separate pentru flex-grow, flex-shrink și flex-basis, poți scrie o singură formă prescurtată, flex.
Exemplu
Aici, al treilea element poate crește (1), nu se poate micșora (0) și pornește de la o lungime de 150 de pixeli:
Prompt
Creați un container flex cu patru elemente. Utilizați proprietatea prescurtată flex pe al treilea element cu valorile 1 0 150px (poate crește, nu se poate micșora, lungime inițială 150px).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex Shorthand Property</title>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 1 0 150px">3</div>
<div>4</div>
</div>
</body>
</html>
Proprietatea CSS align-self
Proprietatea align-items a containerului stabilește o aliniere implicită. Pentru un anumit element din interiorul containerului flex, align-self suprascrie această valoare implicită.
Align-self center
Aici, al treilea element stă la mijlocul containerului:
Prompt
Creați un container flex cu o înălțime de 200px și patru elemente. Utilizați align-self pentru a centra al treilea element pe verticală, la mijlocul containerului.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-self center</title>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
</body>
</html>
Align-self flex-start și flex-end
Aici, al doilea element se mută în partea de sus a containerului, iar al treilea în partea de jos:
Prompt
Creați un container flex cu o înălțime de 200px și patru elemente. Utilizați align-self pentru a alinia al doilea element la flex-start (sus) și al treilea element la flex-end (jos).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-self flex-start and flex-end</title>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
</body>
</html>
Proprietățile elementelor Flex CSS
Toate proprietățile elementelor flex, în ordine alfabetică:
align-self— aliniază un element flex, suprascriind proprietateaalign-itemsa containerului său flexflex— formă prescurtată care acoperăflex-grow,flex-shrinkșiflex-basisflex-basis— îi dă unui element flex lungimea inițialăflex-grow— stabilește cât de mult se extinde un element flex față de celelalteflex-shrink— stabilește cât de mult se micșorează un element flex față de celelalteorder— stabilește locul în care apar elementele flex în succesiunea din container