marcare modul flexbox (din limba engleză Casetă flexibilă - bloc flexibil), care este în prezent în etapa de „posibilitatea de a recomanda“ standarde W3C (Recomandarea candidat W3C) are ca scop asigurarea unui mod mai eficient de marcare, alinierea și distribuția locurilor între elementele din container, chiar dacă lor dimensiunea este necunoscută și / sau determinată dinamic (de aceea a fost numită "flexibilă").
Ideea de bază din spatele aspectul flexibil - este de a oferi containerului posibilitatea de a modifica înălțimea / lățimea (și ordinea) a elementelor pentru un spațiu disponibil de umplere optimă (în principal pentru susținerea toate tipurile și dimensiunile de ecrane).
Containerul Flex întinde elementele pentru a umple spațiul liber sau le comprimă pentru a împiedica ieșirea din limite.
Cel mai important, aspectul Flexbox nu depinde de direcție, spre deosebire de marcările convenționale (blocurile care sunt orientate vertical și elementele rând care sunt aranjate orizontal).
Deși elementele unui aspect convențional funcționează bine pentru paginile, le lipsește flexibilitatea (iar acest lucru nu este un joc de cuvinte) pentru a sprijini aplicații mari și complexe (mai ales atunci când vine vorba de a schimba orientarea, dimensiunea, tensiune, compresie, și așa mai departe).
Notă. Amplasarea Flexbox este cea mai potrivită pentru componentele de aplicație și machete mici, în timp ce marcajul de rețea este conceput pentru aranjarea planurilor de dimensiuni mai mari.
Concepte și termeni de bază
Deoarece Flexbox este un modul întreg, nu o proprietate separată, acesta include multe elemente, inclusiv un întreg set de proprietăți. Unele dintre acestea sunt destinate a fi aplicate unui container (element parental cunoscut ca un container flexibil), în timp ce altele trebuie aplicate elementelor copil (numiți elementele flexibile).
Dacă marcajul obișnuit se bazează pe direcțiile blocurilor și elementelor de linie, marcajul flexibil se bazează pe direcțiile fluxului flexibil. Vă rugăm să acordați atenție următoarei diagrame din caietul de sarcini, explicând ideea principală din spatele marcajului flexibil:
- Axa principală este axa principală a containerului flexibil, de-a lungul căruia sunt plasate elemente flexibile. Aveți grijă, nu trebuie să fie orizontală, poziția sa depinde de proprietatea direcției flexibile (vezi mai jos);
- principalul start | main-end - elementele flexibile sunt amplasate în interiorul containerului, pornind de la pornirea punctului principal. și să ajungă în punctul principal;
- Dimensiunea principală este lățimea sau înălțimea elementului flex, în funcție de dimensiunea principală. Valoarea proprietății dimensiunii principale poate fi setată la lățime sau înălțime;
- axa transversală este axa transversală perpendiculară pe axa principală. Direcția sa depinde de direcția axei principale.
- cruce-start | traversele - linii flexibile sunt umplute cu elemente și plasate în container, pornind de la partea de pornire încrucișată spre partea transversală;
- dimensiunea încrucișată - lățimea sau înălțimea elementului flex, în funcție de dimensiunea selectată. O proprietate poate avea o valoare fie a lățimii, fie a înălțimii dimensiunii transversale.
Proprietățile clasei părinte (flex-container)
Această proprietate definește un container flexibil: o cutie de linie sau un container bloc, în funcție de valoarea setată. De asemenea, permite un context flexibil pentru toți copiii săi direcți:
Rețineți că coloanele CSS nu au efect în containerul flexibil.
flex-direcție
Această proprietate specifică axa principală care definește direcția în care elementele flex sunt plasate în containerul flex. Flexbox (cu excepția ambalajului opțional) este un concept de marcare unidirecțională.
Imaginați-vă că elementele flex sunt situate în principal în coloane orizontale sau verticale:
- rând (implicit): de la stânga la dreapta pentru ltr; de la dreapta la stânga pentru RTL;
- rând-revers. de la dreapta la stânga pentru în ltr; de la stânga la dreapta pentru RTL;
- coloană. precum și rândul. dar de sus în jos;
- coloană-inversă. precum și rândul-invers. dar de jos în sus.
Implicit elementele flexibile vor încerca să se strângă într-o singură linie. Puteți schimba acest lucru și puteți împacheta elementele după cum este necesar utilizând această proprietate. Aici, un rol are și direcția în care se află liniile noi:
- nowrap (implicit): single-line / left-to-right pentru ltr; de la dreapta la stânga pentru RTL;
- înfășurați. multiline / stânga la dreapta pentru ltr; de la dreapta la stânga pentru RTL;
- wrap-inversă. multi-linie / dreapta spre stânga pentru ltr; de la stânga la dreapta pentru RTL.
flex-flow (aplicat la elementul părinte al containerului flexibil)
Aceasta este o formă abreviată a proprietăților flex-direction și flex-wrap. care împreună determină axa principală și transversală a containerului flexibil. Valoarea implicită este rândul acum:
justifică conținut
Această proprietate specifică alinierea de-a lungul axei principale. Acest lucru ajută la distribuirea spațiului liber în exces, dacă toate elementele flexibile din linie sunt inflexibile sau flexibile, dar au atins dimensiunea maximă. De asemenea, această proprietate vă permite să obțineți controlul asupra alinierii elementelor atunci când acestea depășesc limitele liniei:
- flex-start (implicit): elementele sunt aliniate la începutul liniei;
- flex-end. elementele sunt aliniate la capătul liniei;
- centru. elementele sunt aliniate la centrul liniei;
- spațiu-între. elementele sunt distribuite uniform pe o linie: primul element este situat la începutul liniei, ultimul este la sfârșit;
- Spațiu în jurul valorii. elementele sunt distribuite uniform pe o linie cu aceeași distanță între ele.
aliniați-elemente
Această proprietate determină modul în care elementele flexibile sunt plasate în mod prestabilit pe axa transversală pe linia curentă. Aceasta poate fi considerată o versiune a justificării pentru axa transversală (perpendiculară pe axa principală):
- flex-start. marginea elementelor de pornire încrucișată este situată pe linia de pornire încrucișată;
- flex-end. marginea elementelor de pornire încrucișată este situată pe linia transversală;
- centru. elementele sunt situate în centrul axei transversale;
- valoarea inițială. alinierea elementelor are loc în funcție de linia de bază;
- stretch (implicit): elementele sunt întinse pentru a umple containerul (ținând cont de valorile min-lățime / lățimea maximă).
alinia conținut
Această proprietate vă permite să aliniați rândurile din interiorul containerului flex atunci când există un spațiu liber pe axa transversală, care este similar cu modul în care proprietatea justify-content aliniază elementele individuale în raport cu axa principală.
Notă. această proprietate nu va funcționa dacă există o singură linie de elemente flexibile:
- flex-start. liniile sunt situate la începutul containerului;
- flex-end. liniile sunt situate la capătul containerului;
- centru. liniile sunt situate în mijlocul containerului;
- spațiu-între. rândurile sunt distribuite uniform; Prima linie este la începutul containerului, iar ultima la sfârșit;
- Spațiu în jurul valorii. rândurile sunt plasate uniform la aceeași distanță una față de cealaltă;
- stretch (implicit): rândurile sunt întinse pentru a umple spațiul rămas.
Proprietățile elementelor copilului
(elemente flexibile)
În mod prestabilit, elementele flex sunt aranjate în ordinea specificată de sursă. Cu toate acestea, proprietatea ordinului controlează ordinea în care elementele apar în containerul flex:
Această proprietate permite elementului flexibil să "crească" dacă este necesar. Este nevoie de o valoare fără dimensiuni, care să servească proporțional. Această valoare determină cât spațiu este disponibil în interiorul containerului flexibil.
Dacă proprietatea flex-creștere este setată la 1 pentru toate elementele, aceeași dimensiune în interiorul containerului va fi atribuită pentru fiecare element copil. Dacă setați valoarea la 2 pentru unul dintre copii, va dura de două ori mai mult spațiu ca ceilalți:
Numerele negative nu sunt permise.
flex-psihiatru
Această proprietate definește pentru elementele flexibile capacitatea de a comprima dacă este necesar:
Numerele negative nu sunt permise.
flex-bază
Această proprietate determină dimensiunea implicită a elementelor înainte de alocarea spațiului rămas:
Această proprietate este o formă abreviată pentru o combinație de proprietăți flex-grow, flex-shrink și flex-base. Al doilea și al treilea parametru (flex-shrink și flex-base) sunt specificate opțional. Valorile implicite: 0 1 auto:
alinierea auto
Această proprietate vă permite să suprascrieți alinierea implicită (sau specificată de proprietatea align-items) pentru elemente individuale flex.
Valorile disponibile pot fi găsite în descrierea proprietății align-items:
Rețineți că plutiți. clare și aliniate vertical nu funcționează cu elemente flexibile.
Să începem cu un exemplu foarte simplu, rezolvând o problemă aproape zilnică: alinierea ideală în centru. Nu este nimic mai ușor dacă utilizați flexbox:
Acest exemplu se bazează pe faptul că proprietatea marjă. setați la auto. absoarbe excesul de spațiu. Prin urmare, această instrucțiune de indentare aliniază elementul centrat exact pe ambele axe.
Acum hai să folosim încă câteva proprietăți. Să presupunem că avem o listă cu 6 elemente, toate de dimensiune fixă (pentru estetică), dar cu posibilitatea de umplere automată.
Vrem ca acestea să fie frumos, distribuite uniform pe axa orizontală, astfel încât atunci când se schimbă dimensiunea ferestrei browserului, totul arăta bine (fără a utiliza solicitările mass-media):
Gata! Toate celelalte sunt înregistrate. Iată o demonstrație a acestui exemplu. Faceți clic pe link și încercați să redimensionați fereastra pentru a vedea ce se întâmplă:
Să încercăm altceva. Să presupunem că avem la partea de sus a site-ului este meniul de navigare, aliniate la dreapta, dar vrem să ecrane de dimensiuni medii este aliniat pe centru, și pentru dispozitive cu ecrane mici - sunt aranjate într-o singură coloană. Totul este destul de simplu:
Să încercăm să facem chiar mai bine, jucând cu "flexibilitatea" elementelor flexibile. Ce zici de marcajele mobile în trei coloane, cu un antet și o lățime totală a subsolului? Și cu ieșirea elementelor, independent de ordinea dată de codul sursă:
Utilizarea prefixelor pentru flexbox
Flexbox necesită utilizarea prefixelor furnizorilor pentru a suporta majoritatea browserelor. Aceasta include nu numai utilizarea prefixelor furnizorilor în fața proprietăților, ci și denumirile complet diferite pentru proprietăți și valori.
Și toate pentru că specificația flexbox sa schimbat în timp, creând „vechi“ (vechi), „Tweener“ (intermediar), și „noi“ (nouă) versiune.
Poate că cea mai bună cale în această situație este de a scrie cod folosind noua (și finală) sintaxă și sări peste CSS prin Autoprefixer. care se ocupă foarte mult de retroactivitatea versiunilor anterioare.
Alternativ, mai jos este metoda Sass @ mixin pentru ajutor cu unele prefixe, care de asemenea dezvăluie ideea acțiunilor ce trebuie luate:
Suport pentru browser
Articole similare
Trimiteți-le prietenilor: