CSS Flexbox (Modelul Flexibil de Aranjare în Casetă)
Numele Flexbox este o formă scurtă a modulului CSS Flexible Box Layout.
Ca model de aranjare, dispune elementele într-un container fie pe orizontală, fie pe verticală, într-un mod flexibil și responsiv.
Obții layout-uri flexibile și responsive cu puțin efort, fără să ai nevoie de float sau de poziționare.
Flexbox vs. Grid: Diferența stă în dimensiuni. Flexbox gestionează câte una odată (rânduri SAU coloane), în timp ce CSS Grid gestionează două (rânduri ȘI coloane).
Exemplu
Cinci elemente flex stau pe un rând în interiorul unui container flex.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Five Flex Items</title>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
</body>
</html>
Componentele CSS Flexbox
Orice flexbox are două părți:
- Un Container Flex — elementul părinte, a cărui proprietate
displayare valoareaflexsauinline-flex. - Unul sau mai multe Elemente Flex — orice copil direct al containerului devine automat un element flex.
Un Container Flex cu Trei Elemente Flex
În exemplul de mai jos, zona albastră este containerul flex, iar el conține trei elemente flex.
Capitolele următoare intră în mai multe detalii despre containere și elemente.
Exemplu
Trei elemente flex în interiorul unui container flex.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Flex Items</title>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>