CSS3 Flexbox Container

Curs Css

Flexbox (sau Flexibil container) este un nou mod in CSS3 de amplasare elemente in pagina, destinate sa se ajusteze la diferite dimensiuni si dispozitive de afisare.
Acest model de amplasare flexibil nu foloseste 'float', si nici nu face continutul sa depaseasca marginile.
Flexbox ofera control pentru aliniere, directie, ordonare si marime la elementele din container.

Creare container flexbox

<style>
.container {
display: flexinline-flex; /* or: inline-flex */
margin:2px;
padding:3px;
}
.container .item {
background:#ccccfe;
margin:2px;
}
</style>

- Content Before..
<div class='container'>
 Parent content.
 <div class='item'>Child 1</div>
 <div class='item'>Child_2</div>
 <div class='item'>Child-3</div>
</div>
- Content After..

Proprietati ale containerului flex

flex-direction

• row - (default) flex-items sunt aranjate in linie, de la stanga la dreapta (in context ltr).
• row-reverse - flex-items sunt aranjate in linie, in sens invers, de la dreapta la stanga (in context ltr).
• column - flex-items sunt aranjate pe coloane, de sus in jos.
• column-reverse - flex-items sunt aranjate pe coloane, invers, de jos in sus.

.container {
 display: inline-flex;
 flex-direction: column;
}

flex-wrap

• nowrap - (default) toate elementele din container flex sunt pe o singura linie.
• wrap - flex-items vor fi aranjate pe mai multe linii de sus in jos.
• wrap-reverse - flex-items vor fi aranjate pe mai multe linii, invers, de jos in sus.

.container {
 display: flex;
 flex-wrap: wrap;
}

flex-flow

.container {
 display: flex;
 flex-flow: row wrap;
}

justify-content

• flex-start - (default) elementele sunt pozitionate la inceputul containerului.
• flex-end - elementele sunt pozitionate la sfarsitul containerului.
• center - elementele sunt pozitionate in centrul containerului.
• space-between - elementele sunt pozitionate cu spatiu egal intre ele, primul si ultimul flex-item sunt la marginile containerului.
• space-around - elementele sunt pozitionate cu spatiu egal in jurul lor, inclusiv primul si ultimul flex-item.
• space-evenly - elementele sunt pozitionate cu spatiu egal intre ele si margini.

.container {
 display: flex;
 justify-content: space-around;
}

align-items

• stretch - (default) intinde elementele pana umple containerul (respecta min-width/max-width).
• flex-start - elementele sunt pozitionate in partea de sus a containerului.
• flex-end - elementele sunt pozitionate in partea de jos a containerului.
• center - elementele sunt puse in centru, pe axa verticala.
• baseline - flex-items sunt aliniate astfel incat linia lor de baza sa fie aliniata.

.container {
 display: flex;
 align-items: center;
}

align-content

• stretch - (default) Liniile se intind pentru a prelua spatiul ramas.
• flex-start - Liniile sunt aranjate la inceputul containerului.
• flex-end - Liniile sunt aranjate la sfarsitul containerului.
• center - Liniile sunt aranjate in centrul containerului.
• space-between - Liniile sunt distribuite uniform; prima linie este la inceputul containerului, iar ultima este la sfarsit.
• space-around - Liniile sunt distribuite uniform cu spatiu egal in jurul fiecarei linii.

.container {
 display: flex;
 align-content: space-around;
}

Testare proprietati Flexbox

.container {
display: flexinline-flex;
flex-direction: rowrow-reversecolumncolumn-reverse;
flex-wrap: nowrapwrapwrap-reverse;
justify-content: flex-startflex-endcenterspace-betweenspace-aroundspace-evenly;
align-items: stretchflex-startflex-endcenterbaseline;
align-content: stretchflex-startflex-endcenterspace-betweenspace-around;
margin:2px;
padding:3px;
height: auto40px100px200px;
width: auto25%50%75%100%300px500px800px;
}
.container .item {
background:#ccccfe;
height:50px;
margin:2px;
}