Modelul CSS3 - Flexible Box

Flexbox - un model CSS3

Flexbox nu este altceva decat un nou model marca CSS3 si este similar cu modelul block. Acestuia ii lipsesc proprietatile blocurilor cum ar fi spre exemplu "float" si "columns" dar introduce o serie de instrumente simple pentru alinierea continutului in "block".
Cu ajutorul lui flexbox putem pune continut in orice directie, elementele pot fi aranjate dinamic in functie de spatiul disponibil.
Un flexbox va actiona ca si o cutie cand este setat in mod implicit, dar poate sa actioneze ca si o linie. Elementele copil ale unui flexbox sunt tratate ca si elemente flexbox.

Vizitati si site-ul personal servicii web design.

Proprietatile Flexbox

Cu mult timp in urma, multi designeri foloseau tabelele pentru a putea realiza macheta unui site web. Tabelele nu sunt un mod flexibil de a manipula componentele intr-o pagina web. De aceea lucrurile au evoluat, si astfel ca astazi avem un mark-up al viitorului si anume stilurile CSS.

Problemele rezolvate cu Flexbox

Modelul de acum de tip box da foarte multe batai de cap. Insa Flexbox a reusit sa le fixeze. propun urmatorul model si am sa arat cum flexbox poate sa rezolve problemele aparute.

1	#element {

2	width: 50%;

3	border 1px solid #000;

4	padding: 0 5px;

5

}

Solutia:

1	#element {

2	box-sizing: border-box;

3	width: 50%;

4	border 1px solid #000;

5	padding: 0 5px;

6

}

Astfel ca CSS3 spune browserului sa aduca elementul la dimensiunea specificata, incluzand border, padding si width.