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.
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 este element de tip bloc?
<div> <img> <span>
<div>Web Programming and Development</div>
Care cod CSS afiseaza textul subliniat?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".
has't played haven't been playing will haven't played
The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.
Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".
habrá contado va a contar contaba
Él no habrá contado el cuento.
- El nu ar fi spus povestea.
CSS3 Flexbox Item

Last accessed pages

  1. Functii predefinite si Coduri PHP (2452)
  2. Programe pentru invatare limba Spaniola (6659)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (231963)
  4. Blog si Cugetari Personale (103138)
  5. Cursuri limba engleza gratuite si lectii online (52101)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2340)
  2. Curs HTML gratuit Tutoriale HTML5 (1661)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (1457)
  4. Curs si Tutoriale JavaScript (1405)
  5. Curs CSS Online Tutoriale CSS3 (1370)