Flexbox - un nou mod de a aranja blocuri de pe pagina. Această tehnologie dezvoltată special pentru elementele de aspect, în contrast cu float-uri. Cu elemente flexbox pot fi aliniate cu ușurință orizontal și vertical pentru a schimba direcția și ordinea elementelor de afișare se extind înălțimea totală a părintelui blocuri sau bătut cuie-le la marginea inferioară.
De exemplu, utilizați cadrele cu JsBin. O mulțime de ei, așa că, din păcate, pagina poate încetini un pic.
În exemple, numai noua sintaxă. La momentul scrierii, ceea ce este corect, acestea sunt afișate în Chrome. În Firefox, lucru parțial în Safari - nu funcționează.
Specificații în limba engleză este aici: w3.org/TR/css3-flexbox.
Potrivit site-ului caniuse.com. Flexbox nu este acceptat 8 si 9 IE si Opera Mini, dar alte browsere nu sunt susținute de toate proprietățile și / sau prefixele necesare.
Acest lucru înseamnă că tehnologia nu poate fi utilizat pe scară largă acum, dar e timpul pentru a ajunge să o cunoască mai bine.
În primul rând trebuie să știți că elementele de flexare sunt dispuse de-a lungul axelor. În mod implicit, elementele sunt dispuse orizontal - de-a lungul axei principale - axa principală.
De asemenea, trebuie amintit că, atunci când se utilizează flexbox pentru unitățile interioare nu funcționează float. clar și vertical-align. precum și proprietăți care definesc coloana din text.
Se prepară la sol pentru experimente:
O unitate părinte (galben) și 5 filiale.
Display: flex
Și acum elementul părinte este de afișare a adăugat: flex;. div-uri internă sunt aranjate într-un rând (de-a lungul axei majore) a coloanelor de aceeași înălțime, indiferent de conținutul.
display: flex; Aceasta face ca toți copiii din cauciuc - flex. mai degrabă decât bloc - bloc. așa cum a fost inițial.
În cazul în care unitatea de bază conține imagini sau text fără ambalaje, ele devin elemente-flex anonime.
proprietate de afișare pentru flexbox poate lua două valori:
flex - in timpul blocurilor prioritare de lățime de calcul în structura (lățime bloc în caz de cantități insuficiente de conținut poate ieși în afara granițelor);
Inline-flex - se acordă prioritate conținutului (blocuri de conținut rastopyrivat la lățimea necesară pentru a liniilor, dacă este posibil, loc).
Flex-direcție
blocuri direcție aspect este controlat de flex-direcție.
rând - rând (implicit); rând-revers - rând cu elementele în ordine inversă; coloană - coloana; coloană inversă - coloană cu elementele în ordine inversă.
rând și rând inversă
coloană și coloana inversă
Într-o singură linie poate fi mai multe blocuri. Transferat sau nu determină proprietatea flex-wrap.
nowrap - blocuri nu sunt transferate (implicit); folie - blocuri transferate; wrap-revers - blocurile sunt transferate și poziționate în ordine inversă.
nowrap. înfășurați. wrap-revers
Pentru proprietățile stenografice există flex-direcție și proprietate flex-folie: flex-flow.
Valori posibile: Puteți seta ambele proprietăți, sau doar unele unul. De exemplu:
flex-flow: coloana; -Flow flex: wrap-inversă; flex-flow: wrap-coloană inversă;
Pentru procedura de control este ordinea de proprietate.
Valorile posibile sunt numere. Pentru a pune unitatea primul, da ordine: -1:
Justify conținut
Pentru a alinia elemente au mai multe proprietăți: justifică conținut. aliniați-elemente și aliniați-auto.
justifică conținut alinia și-elemente se aplică containerului părinte, aliniați-auto - pentru copil.
justifică-conținut este responsabil pentru alinierea axei principale.
Valorile posibile justifică conținut:
flex-start - elemente aliniate de la începutul axei principale (implicit); flex-end - capătul elementelor sunt aliniate pe axa principală; Centru - Elementele sunt aliniate cu centrul axei principale; spațiu între - elementele sunt aliniate de-a lungul axei principale a spațiului de distribuție între ele; elemente aliniate de-a lungul axei principale a spațiului de distribuție în jurul valorii de sine - spațiu în jurul valorii.
Aliniați-elemente
aliniați-elemente responsabile pentru alinierea axei perpendiculare.
Valorile posibile alinia-elemente:
flex-start - start elementelor aliniate perpendicular pe axa; flex-end - de la elementele de capăt sunt aliniate perpendicular pe axa; centru - elementele sunt centrate; - elemente de bază aliniate cu linia de bază; întinde - întinde elemente, care ocupă tot spațiul de-a lungul axei perpendiculare (setarea implicită).
Alinierea auto
alinierea auto este de asemenea responsabil pentru alinierea perpendiculară pe axa, dar este dat un element flex separat.
Valorile posibile alinia auto:
auto - implicit. Aceasta înseamnă că un element utilizează Align-elemente ale elementului mamă; flex-start - un element este aliniat perpendicular pe axa de la început; flex-end - de la capătul elementului este aliniat perpendicular pe axa; centru - elementul este centrat; valoarea inițială - element este aliniat cu linia de bază; întinde - element de întindere, care ocupă tot spațiul în înălțime.
Alinierea conținut
Pentru a controla alinierea într-un multi-flex-container are proprietatea alinia conținut.
flex-start - elemente aliniate de la începutul axei principale; flex-end - capătul elementelor sunt aliniate pe axa principală; Centru - Elementele sunt aliniate cu centrul axei principale; spațiu între - elementele sunt aliniate de-a lungul axei principale a spațiului de distribuție între ele; ; Elemente aliniate de-a lungul axei principale a spațiului de distribuție în jurul valorii de sine - spațiu în jurul valorii de întinde - elemente sunt întinse pentru a umple întreaga înălțime (implicit).
PS: Unele lucruri nu am putut vedea în acțiune, de exemplu, linia flex-flux: folie de coloană sau o înregistrare completă a aceluiași flex-direcție: coloană; flex-wrap: folie; .
Elementele sunt o coloană, dar nu sunt transferate:
Wrap nu funcționează atunci când flex-direcție: coloană;. deși spec, se pare ca acest lucru:
Cred că în timp va funcționa.