CSS3 Flexbox Item

- flex-grow
- flex-basis
- flex-shrink
- flex
- align-self
- Testare proprietati Flexbox

Proprietati ale elementelor din containerul flex

- Proprietatile CSS3 flexbox prezentate in continuare se aplica la fiecare element din interiorul containerului flex.

float, clear si vertical-align nu au efect la flex-item.

order

Proprietatea order stabileste ordinea unui element flexibil relativ la celelalte elemente in interiorul containerului flex. Valorile sunt numere intregi (-2, -1, 0, 1, 2, ..). Default e 0, cresterea si descresterea valorii muta elementul la dreapta, respectiv la stanga.

Setand margin: auto; va absorbi spatiul suplimentar din jurul elementului.

.flex-item {
 order: -1;
}

- Pentru a schimba locurile intre primul si ultimul element flexibil, folositi un cod ca acesta:

.item:first-child {
 order:1;
}
.item:last-child {
 order:-1;
}

flex-grow

Proprietatea flex-grow specifica cat va creste elementul in raport cu restul elementelor flexibile din interiorul containerului. Valorile sunt numere pozitive (0, 1, 2, ..). Default e 0.
- in codul urmator, al doilea element flexibil ocupa de trei ori mai mult spatiu decat celelalte:

.item:nth-child(2) {
 flex-grow: 3;
}

flex-basis

flex-basis specifica lungimea initiala a unui element flexibil. Default: auto.
- In codul urmator, flex-basis e specificat la al patrulea flex-item, si defineste lungimea lui initiala:

.container .item {
 flex-basis:auto;
}

.container .item:nth-child(4) {
 flex-basis: 350px;
}

flex-shrink

flex-shrink specifica cat se va micsora elementul in raport cu restul elementelor flexibile din interiorul containerului. Valorile sunt numere pozitive (0, 1, 2, ..). Default e 1.
- in codul urmator, al doilea flex-item se micsoreaza de trei ori mai mult decat restul:

.container .item {
 flex-basis: 100px;
}

.container .item:nth-child(2) {
 flex-shrink: 3;
}

flex

flex-shrink stabileste in aceeasi proprietate valorile pentru flex-grow, flex-shrink, si flex-basis.

flex: flex-grow flex-shrink flex-basis;

Default: 0 1 auto.
- In exemplul urmator, al doilea flex-item creste de doua ori mai mult decat restul elementelor, cu un flex-basis de 150px. Valoarea pentru flex-shrink nu e adaugata, deci ramane cea implicita (1).

.container .item:nth-child(2) {
 flex: 2 150px;
}

align-self

Proprietatea align-self specifica alinierea elementului selectat in interiorul containerului flexibil. Rescrie valoarea proprietatii align-items care se defineste la containerul flex.
- Valori pt. align-self:

auto - (default) Elementul preia valoarea proprietatii align-items a containerului flex parinte.
stretch - Elementul este pozitionat astfel inat sa se potriveasca cu dimensiunea containerului.
flex-start - Elementul este pozitionat in partea de sus a containerului.
flex-end - Elementul este pozitionat in partea de jos a containerului.
center - Elementul e centrat pe axa verticala.
baseline - Elementul este pozitionat pe linia de baza a containerului.

- Exemplu, al treilea si al patrulea flex-item au rescrisa valoarea pentru proprietatea align-self:

.container {
 align-items: flex-start;
 display: flex;
 height:90px;
 width: 400px;
}

.container .item:nth-child(3) {
 align-self: stretch;
}

.container .item:nth-child(4) {
 align-self: center;
}

Resultat:

Testare proprietati Flexbox

Aici puteti testa direct combinatia de diferite proprietati si valori pentru containerul flex si individual pentru fiecare flex-item.


/* Flexbox Container Properties */
.container {
display: ;
flex-direction: ;
flex-wrap: ;
justify-content: ;
align-items: ;
align-content: ;
margin:2px;
padding:3px;
height: ;
width: ;
}

/* Flexbox Item Properties */
.container .item:nth-child(1) {
 order: ;
 flex-grow: ;
 flex-basis: ;
 flex-shrink: ;
 align-self: ;
}
.container .item:nth-child(2) {
 order: ;
 flex-grow: ;
 flex-basis: ;
 flex-shrink: ;
 align-self: ;
}
.container .item:nth-child(3) {
 order: ;
 flex-grow: ;
 flex-basis: ;
 flex-shrink: ;
 align-self: ;
}
.container .item:nth-child(4) {
 order: ;
 flex-grow: ;
 flex-basis: ;
 flex-shrink: ;
 align-self: ;
}

Demo:

- Content Before..

Flex-Item
#1

Flex-Item
#2

Flex-Item
#3

Flex-Item
#4

- Content After..

<<-CSS3 Flexbox Container -- Animatie elemente HTML cu ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce atribut face un buton radio sau checkbox sa fie selectat?

checked="checked" selected="selected" disabled="disabled"

<input type="checkbox" name="a_name" value="value" checked="checked" />

Ce valoare CSS redimensioneaza imaginea de fundal pana la marimea elementului?

repeat-x contain linear-gradient

#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}

Ce operator se foloseste pentru restul impartirii a doua numere?

% * /

var rest8_7 = 8 % 7;
alert(rest8_7);

Indicati functia PHP care rotunjeste numarul la valoarea intreaga mare.

floor() ceil() abs()

$nr = ceil(3.5);
echo $nr;        // 4

Indicati articolul corect la cuvantul "bike" in propozitia: "Alex wants to buy ... bike".

An The A

Alex wants to buy a bike.
- Alex vrea sa cumpere o bicicleta.

Indicati articolul nedefinit corect pentru cuvantul: "libros" (carti)

unos una un

Leí unos libros.
- Am citit niste carti.