CSS3 Flexbox Item

Curs Css

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

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.

.flex-item {
 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. 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: 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;
}

/* Flexbox Item Properties */

Demo:

<input type="text" value="valoare-fixa" readonly="readonly" name="a_name" />

.class {
  border:2px solid blue;
  border-radius:1.2em;
}

var ques = window.confirm("Rezultatul lui 0+0 este 0?");
if (ques) alert("Corect");
else alert("Incorect");

$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8

Its ears are big.
- Urechile lui sunt mari.

Los niños son deportistas.
- Copii sunt sportivi.