Ultimele tutoriale de dezvoltare web
 

CSS3 Flexible Box

❮ Anterior Urmatorul capitol ❯

CSS3 Flexbox

Cutii flexibile, sau flexbox , este un nou mod de dispunere în CSS3.

Utilizarea flexbox asigură că elementele se comportă în mod previzibil , atunci când aspectul paginii trebuie să accepte diferite dimensiuni de ecran și diferite dispozitive de afișare.

Pentru multe aplicații, modelul de cutie flexibilă oferă o îmbunătățire față de modelul de bloc în care acesta nu utilizează flotoare, nici nu colaps marjele containerului flexibil cu marginile conținutului său.

Suport pentru browser-

Numerele din tabel specifica prima versiune de browser care acceptă pe deplin caracteristica.

Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.

Proprietate
Basic support
(single-line flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1

CSS3 Flexbox Concepte

Flexbox constă în containere flexibile și elemente flex.

Un container flexibil este declarată prin setarea de display proprietate a unui element fie flex (rendered as a block) sau inline-flex (rendered as inline) .

În interiorul unui container flexibil există unul sau mai multe elemente flex.

Notă: Totul în afara unui container flexibil și în interiorul unui element flexibil este redat ca de obicei. Flexbox definește modul în care elementele flex sunt dispuse în interiorul unui container flexibil.

Flex elemente sunt poziționate în interiorul unui container flexibil de-a lungul unei linii flex. În mod implicit există doar o singură linie flex per container flex.

Următorul exemplu prezintă trei elemente flex. Acestea sunt poziționate în mod implicit: de-a lungul liniei flex orizontală, de la stânga la dreapta:

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

Încearcă - l singur »

De asemenea, este posibil să se schimbe direcția liniei de flex.

Dacă ne - am stabilit direction proprietatea de a rtl (right-to-left) de la (right-to-left) , textul este tras la dreapta la stânga, și , de asemenea , linia flex schimbă direcția, care va schimba aspectul paginii:

Exemplu

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

Încearcă - l singur »

Direcția Flex

flex-direction proprietate specifică direcția elementelor flexibile din interiorul containerului flexibil. Valoarea implicită a flex-direction este row ( de la stânga la dreapta, de sus în jos).

Celelalte valori sunt după cum urmează:

  • row-reverse - În cazul în scris-mode (direction) este la stânga la dreapta, elementele flex vor fi dispuse la dreapta la stânga
  • column - În cazul în care sistemul de scriere este orizontală, elementele flex vor fi dispuse vertical
  • column-reverse - La fel ca și coloană, dar inversat

Exemplul următor arată rezultatul utilizării row-reverse valoarea:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul utilizării column valorii:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul folosind column-reverse valoarea:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Justifica conținut de proprietate

justify-content de proprietate aliniază orizontal elemente containerul flexibil atunci când elementele nu folosesc tot spațiul disponibil pe principala axa.

Valorile posibile sunt după cum urmează:

  • flex-start - valoarea implicită. Elementele sunt poziționate la începutul containerului
  • flex-end - Elementele sunt poziționate la capătul containerului
  • center - Elementele sunt poziționate în centrul containerului
  • space-between - Elementele sunt poziționate cu spațiul dintre liniile
  • space-around în space-around de - Elementele sunt poziționate cu spațiu înainte, între și după liniile

Exemplul următor arată rezultatul folosind flex-end valoarea:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul utilizării center valorii:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul folosind space-between valoarea:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul utilizării space-around în space-around valorii:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Align-elemente de proprietate

align-items proprietatea aliniază vertical elemente containerul flexibil atunci când elementele nu folosesc tot spațiul disponibil pe axa transversală.

Valorile posibile sunt după cum urmează:

  • stretch - valoarea implicită. Elementele sunt întinse pentru a se potrivi containerului
  • flex-start - Elementele sunt poziționate în partea superioară a containerului
  • flex-end - Elementele sunt poziționate în partea inferioară a recipientului
  • center - Elementele sunt poziționate în centrul containerului (vertically)
  • de baseline - Elementele sunt poziționate la linia de bază a containerului

Exemplul următor arată rezultatul folosind stretch valoarea (this is the default value) :

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul folosind flex-start valoarea:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul folosind flex-end valoarea:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul utilizării center valorii:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul utilizării de baseline valoarea:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Proprietatea flex-wrap

flex-wrap proprietate specifică dacă elementele flex ar trebui să înveliți sau nu, în cazul în care nu există spațiu suficient pentru ei pe o singură linie flex.

Valorile posibile sunt după cum urmează:

  • nowrap - Valoare implicită. Elementele flexibile nu vor încheia
  • wrap - Elementele flexibile vor încheia , dacă este necesar
  • wrap-reverse - Elementele flexibile se vor încheia, dacă este necesar, în ordine inversă

Exemplul următor arată rezultatul utilizării nowrap valorii (this is the default value) :

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Următorul exemplu arată rezultatul folosind wrap de valoare:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Exemplul următor arată rezultatul utilizării wrap-reverse valoare:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

Încearcă - l singur »

Proprietatea Align continut

align-content de proprietate modifică comportamentul flex-wrap proprietate. Este similar cu align-items , dar în loc de aliniere elemente flex, se aliniază liniile de flex.

Valorile posibile sunt după cum urmează:

  • stretch - valoarea implicită. Liniile se întind pentru a prelua spațiul rămas
  • flex-start - Liniile sunt ambalate spre începutul containerului flexibil
  • flex-end - Liniile sunt ambalate spre capătul containerului flexibil
  • center - Liniile sunt ambalate spre centrul containerului flexibil
  • space-between - Liniile sunt distribuite uniform în container flexibil
  • space-around în space-around - Liniile sunt distribuite uniform în container flexibil, cu spații de jumătate de dimensiune la fiecare capăt

Exemplul următor arată rezultatul utilizării center valorii:

Exemplu

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

Încearcă - l singur »

Proprietăți articol Flex

ordonare

order Proprietatea specifica ordinea unui element relativ flexibil , cu restul elementelor flexibile din interiorul aceluiași container:

Exemplu

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

Încearcă - l singur »

margine

Setarea margin: auto; va absorbi spațiu suplimentar. Acesta poate fi folosit pentru a împinge elemente flex în poziții diferite.

În exemplul următor am stabilit margin-right: auto; de margin-right: auto; pe primul element flexibil. Acest lucru va face ca tot spațiul suplimentar să fie absorbit la dreapta acestui element:

Exemplu

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

Încearcă - l singur »

Perfect Centering

În exemplul următor vom rezolva o problemă aproape zilnic: centrare perfectă.

Este foarte ușor cu flexbox. Setarea margin: auto; va face elementul perfect centrat în ambele axe:

Exemplu

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

Încearcă - l singur »

alinierea auto

align-self proprietatea elemente flex suprascrie containerul flexibil de proprietate align-elemente pentru elementul respectiv . Ea are aceleași valori posibile ca align-items de proprietate.

Exemplul următor prezintă diferite valori Align personale la fiecare element flex:

Exemplu

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

Încearcă - l singur »

contracta

flex Proprietatea specifică lungimea elementului flexibil, în raport cu restul elementelor din interiorul flex același container.

În exemplul următor, primul element flex va consuma 2/4 din spațiul liber, iar celelalte două elemente de flexare va consuma 1/4 din spațiul liber fiecare:

Exemplu

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

Încearcă - l singur »

Exemple

Mai multe exemple

Creați un site receptiv cu flexbox
Acest exemplu demonstrează modul de a crea un aspect site-ul receptiv cu flexbox.

CSS3 flexbox Proprietăți

Tabelul următor listează proprietățile CSS utilizate cu flexbox:

Proprietate Descriere
display Specifică tipul de cutie utilizat pentru un element HTML
flex-direction Specifică direcția elementelor flexibile în interiorul unui container flexibil
justify-content aliniază Orizontal elementele flex, atunci când elementele nu folosesc tot spațiul disponibil pe principala axa
align-items aliniază elementele Vertically flex, atunci când elementele nu folosesc tot spațiul disponibil pe axa transversală
flex-wrap Specifică dacă elementele flexibile trebuie să înveliți sau nu, în cazul în care nu există spațiu suficient pentru ei pe o linie flex
align-content Modifică comportamentul de proprietate flex-wrap. Este similar cu alinierea-elemente, dar în loc de aliniere elemente flex, se aliniază liniile flex
flex-flow Un Propr prescurtare pentru flex-direcție și flex-folie
order Specifică ordinea unui element relativ flexibil, cu restul elementelor din interiorul flex același container
align-self Folosit pe elemente flex. Suprascrie Align-articole recipientului proprietate
flex Specifică lungimea unui element flexibil, în raport cu restul elementelor din interiorul flex același container

❮ Anterior Urmatorul capitol ❯