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 */

Demo:

- Content Before..

Flexbox examples.

- Content After..

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

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.