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

Care tag se foloseste in <table> pentru a crea celula de tip "header"?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Ce proprietate CSS seteaza distanta dintre randuri?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Care functie deschide o noua fereastra.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);

Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?

sleeping slept will sleep

He will sleep there.
- El va dormi acolo.

Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?

dormido dormirá durmiendo

Él dormirá allí.
- El va dormi acolo.