- 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;
}
flexbox-order
- 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;
}
flexbox-flex-grow

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;
}
flexbox-flex-basis

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;
}
flexbox-flex-shrink

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;
}
flexbox-flex

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: - 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:
flexbox-align-self

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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
CSS3 Flexbox Item

Last accessed pages

  1. PHP PDO - Select, fetch (262)
  2. Contor vizitatori si accesari (316)
  3. Articolul din limba engleza - The article (16744)
  4. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (30745)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (20697)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2029)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1414)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (998)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (980)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (921)