Observi că deși am pus padding de 1em și pe meniu, și pe item, se pare că acesta nu se adună. De fapt padding-ul la elementele inline dintr-un element bloc nu modifică înălțimea elementului bloc.
Capitolul 4: FlexboxProprietăți ale flexului
Pornim de la următorul markup și stil care să ne ajute să vedem lucrurile:
<style>
.menu {
outline: 1px solid;
padding: 1em;
}
.item {
outline: 1px solid;
padding: 1em 2em;
}
</style>
CSS <nav class="menu">
<a href="#" class="item">Acasă</a>
<a href="#" class="item">Servicii</a>
<a href="#" class="item">Contact</a>
</nav>
HTMLRezultat:
Noțiuni de bază
Pentru a folosi flexul, trebuie să adăugăm display: flex pe meniu.
.menu {
display: flex;
}
CSSAcum arată diferit, pentru că ancorele dintr-o dată se comportă ca un block, nu ca un inline. Copiii direcți ai unui element flex sunt tratați automat ca blocuri.
Mai putem folosi display: inline-flex atunci când vrem să folosim flexul pe un element inline.
Direcția
Dacă nu îi setăm nicio direcție, în sistemul de scriere stânga-dreapta (LTR), elementele din flex se vor distribui pe orizontală, de la stânga la dreapta.
În sistemul de scriere dreapta-stânga (RTL), se vor distribui tot pe orizontală, dar de la dreapta la stânga.
Putem controla această direcție folosind proprietatea flex-direction, cu una din următoarele proprietăți:
| Valoare | ltr | rtl |
|---|---|---|
| row | stânga-dreapta | dreapta-stânga |
| column | sus-jos | sus-jos |
| row-reverse | dreapta-stânga | stânga-dreapta |
| column-reverse | jos-sus | jos-sus |
Folosind valorile generice row și column, se suportă automat ambele direcții de scriere.
Flex pe mai multe linii
În mod normal, elementele flexului vor fi distribuite pe aceeași linie, oricât de multe și oricât de mari ar fi.
Pentru cazurile în care nu vrem asta, putem folosi proprietatea flex-wrap.
Valorile posibile sunt:
| Valoare | Distribuire |
|---|---|
| nowrap | Funcționalitatea standard (nu se trece la linie nouă) |
| wrap | Se trece la linie nouă. Dacă flexul este de la stânga la dreapta, următoarea linie va fi în jos |
| wrap-reverse | Se trece la linie nouă, dar în direcția inversă. Dacă flexul este de la stânga la dreapta, următoarea linie va fi în sus. |
flex-flow
Proprietatea flex-flow ne permite să combinăm setările definite prin flex-direction și flex-wrap. Mie nu îmi place pentru că nu mi se pare suficient de descriptiv numele.
Dar poți să o folosești dacă are mai mult sens pentru tine.
Distanța
Pentru a defini distanța dintre elementele flex-ului se folosește proprietatea gap.
Uneori, se poate obține un efect asemănător punând margin pe fiecare element al flexului. Dar e foarte greu să obții ceva identic.
Gap-ul din flex este aplicat strict între elementele flexului, nu și în afară.
Atunci când ai mai multe linii, poți să controlezi distanța dintre linii cu row-gap, iar distanța dintre elementele de pe o linie cu column-gap.
Atunci când dai două valori lui gap, prima va fi pentru row-gap, iar cea de-a doua pentru column-gap.