CSS3 Flexbox Container

- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- Testare proprietati Flexbox

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.

- Acest tutorial prezinta exemple si proprietati css3 pentru containerul Flex.

Creare container flexbox

Flexbox consta din container flexibil si elemente interioare flexibile.
Pentru a crea un flex container, setati proprietatea display cu valoarea flex (redata ca block) sau inline-flex (redata ca liniara).
Fiecare element dintr-un flex container devine un flex-item. Si textul direct dintr-un container e considerat un flex-item.

<style>
.container {
display: ; /* 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..

Result:

- Content Before..

Parent content.

Flex item #1

Child 2

Flexbox child 3

- Content After..

Proprietati ale containerului flex

flex-direction

Proprietatea flex-direction specifica directia elementelor din flex container. Pot fi aranjate orizontal in linie, sau vertical pe coloane.
- Valori pt. 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.

Exemplu cu inline-flex si column:

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

flex-wrap

In mod initial containerul flex pune toate elementele din el pe o singura linie.
Proprietatea flex-wrap seteaza posibilitatea de a afisa elementele pe mai multe linii (daca pe o linie depasesc lungimea containerului), si directia lor.
- Valori pt. 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

flex-wrap seteaza intr-o singura proprietate valorile pentru flex-direction si flex-wrap. Default: row nowrap
- Sintaxa flex-flow:

flex-flow: flex-direction flex-wrap;

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

justify-content

justify-content seteaza aranjarea pe orizontala a elementelor din flex container cand acestea nu ocupa tot spatiul din el. Distribue spatiul ramas liber.
- Valori pt. 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

align-items seteaza aranjarea pe verticala a elementelor din flex container cand acestea nu ocupa tot spatiul din el. Este similar cu justify-content, dar pe axa verticala.
- Valori pt. 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

align-content aliniaza liniile din flex container cand e spatiu ramas liber pe verticala. Similar cum justify-content aliniaza elementele individual pe orizontala.

Aceasta proprietate nu are efect cand elementele sunt pe o singura linie.

- Valori pt. 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

Aici puteti testa direct combinatia de diferite proprietati si valori pentru containerul flex.

.container {
display: ;
flex-direction: ;
flex-wrap: ;
justify-content: ;
align-items: ;
align-content: ;
margin:2px;
padding:3px;
height: ;
width: ;
}
.container .item {
background:#ccccfe;
height:50px;
margin:2px;
}

Demo:

- Content Before..

Parent content.

Flex item #1

Child 2

Flexbox child 3

- Content After..

<<-CSS3 transition -- CSS3 Flexbox Item->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?

<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>

Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?

text-align clear float

.some_class {
  width: 30%;
  float: left;
}

Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.

Math.ceil(x) Math.abs(x) Math.floor(x)

var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12

Indicati functia PHP care returneaza numarul de caractere dintr-un sir.

mb_strlen() count() stristr()

$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29

Clic pe raspunsul potrivit la intrebarea: "When it happened?".

On the 7th of July 1996 It is a quarter to 5. Nice weather.

When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.

Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".

Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.

¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.