- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- Testare proprietati Flexbox

Flexbox (sau Flexibil container) este un nou mod in CSS3 de amplasare elemente in pagina, destinate sa se ajusteze la diferite dimensiuni si dispozitive de afisare.
Acest model de amplasare flexibil nu foloseste 'float', si nici nu face continutul sa depaseasca marginile.
Flexbox ofera control pentru aliniere, directie, ordonare si marime la elementele din container.

Flexbox layouts
- Acest tutorial prezinta exemple si proprietati css3 pentru containerul Flex.

Creare container flexbox

Flexbox consta din container flexibil si elemente interioare flexibile.
Pentru a crea un flex container, setati proprietatea display cu valoarea flex (redata ca block) sau inline-flex (redata ca liniara).
Fiecare element dintr-un flex container devine un flex-item. Si textul direct dintr-un container e considerat un flex-item.
<style>
.container {
display: ; /* or: inline-flex */
margin:2px;
padding:3px;
}
.container .item {
background:#ccccfe;
margin:2px;
}
</style>

- Content Before..
<div class='container'>
 Parent content.
 <div class='item'>Child 1</div>
 <div class='item'>Child_2</div>
 <div class='item'>Child-3</div>
</div>
- Content After..
Result:
- Content Before..
Parent content.
Flex item #1
Child 2
Flexbox child 3
- Content After..

Proprietati ale containerului flex

flex-direction

Proprietatea flex-direction specifica directia elementelor din flex container. Pot fi aranjate orizontal in linie, sau vertical pe coloane.
- Valori pt. flex-direction: Flexbox direction
Exemplu cu inline-flex si column:
.container {
 display: inline-flex;
 flex-direction: column;
}

flex-wrap

In mod initial containerul flex pune toate elementele din el pe o singura linie.
Proprietatea flex-wrap seteaza posibilitatea de a afisa elementele pe mai multe linii (daca pe o linie depasesc lungimea containerului), si directia lor.
- Valori pt. flex-wrap: Flexbox flex-wrap
.container {
 display: flex;
 flex-wrap: wrap;
}

flex-flow

flex-wrap seteaza intr-o singura proprietate valorile pentru flex-direction si flex-wrap. Default: row nowrap
- Sintaxa flex-flow:
flex-flow: flex-direction flex-wrap;
.container {
 display: flex;
 flex-flow: row wrap;
}

justify-content

justify-content seteaza aranjarea pe orizontala a elementelor din flex container cand acestea nu ocupa tot spatiul din el. Distribue spatiul ramas liber.
- Valori pt. justify-content: Flexbox justify-content
.container {
 display: flex;
 justify-content: space-around;
}

align-items

align-items seteaza aranjarea pe verticala a elementelor din flex container cand acestea nu ocupa tot spatiul din el. Este similar cu justify-content, dar pe axa verticala.
- Valori pt. align-items: Flexbox align-items
.container {
 display: flex;
 align-items: center;
}

align-content

align-content aliniaza liniile din flex container cand e spatiu ramas liber pe verticala. Similar cum justify-content aliniaza elementele individual pe orizontala.
Aceasta proprietate nu are efect cand elementele sunt pe o singura linie.
- Valori pt. align-content: Flexbox align-content
.container {
 display: flex;
 align-content: space-around;
}

Testare proprietati Flexbox

Aici puteti testa direct combinatia de diferite proprietati si valori pentru containerul flex.
.container {
display: ;
flex-direction: ;
flex-wrap: ;
justify-content: ;
align-items: ;
align-content: ;
margin:2px;
padding:3px;
height: ;
width: ;
}
.container .item {
background:#ccccfe;
height:50px;
margin:2px;
}
Demo:
- Content Before..
Parent content.
Flex item #1
Child 2
Flexbox child 3
- Content After..

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>?
<dt> <dd> <li>
<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.
CSS3 Flexbox Container

Last accessed pages

  1. Prezent perfect - Exercitii si teste incepatori (250)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2255)
  3. MySQL Alias si functii (18)
  4. Zoo Amigos (379)
  5. Gradele de comparatie: comparative, superlative (657)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2486)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2255)
  4. Butterfly Kyodai (2024)
  5. Zuma Deluxe (1954)