Blocuri Css flex de aceeași lățime. Exemple de aspect Flex. Realizarea unui aspect adaptiv
Pe scurt, aspectul cu Flexbox ne oferă solutii simple cândva sarcini dificile. De exemplu, atunci când trebuie să aliniați un element pe verticală sau să apăsați subsolul în partea de jos a ecranului sau pur și simplu să introduceți mai multe blocuri într-un rând, astfel încât acestea să ocupe tot spațiul liber. Probleme similare pot fi rezolvate fără flex. Dar, de regulă, aceste soluții sunt mai degrabă ca „cârje” - tehnici de utilizare a CSS în alte scopuri decât scopul propus. În timp ce cu flexbox astfel de sarcini sunt rezolvate exact așa cum este intenționat modelul flex.
Modulul CSS Flexible Box Layout (modul CSS pentru machete cu blocuri flexibile), pe scurt flexbox, a fost creat pentru a elimina deficiențele la crearea unei game largi de modele HTML, inclusiv cele adaptate la diferite lățimi și înălțimi, și pentru a face aspectul logic și simplu . Și o abordare logică, de regulă, funcționează în locuri neașteptate, unde rezultatul nu a fost verificat - logica este totul!
Flexbox vă permite să controlați în mod elegant o varietate de parametri ai elementelor din interiorul unui container: direcția, ordinea, lățimea, înălțimea, alinierea de-a lungul și transversal, distribuția spațiului liber, întinderea și compresia elementelor.
Cunostinte de baza
O FlexBox constă dintr-un Container și articolele acestuia (elementele flexibile).
Pentru a activa flexbox, oricine element HTML atribuiți doar css proprietate de afișare:contracta; sau afișare:inline-flex; .
După activarea proprietății flex, în interiorul containerului sunt create două axe: principală și transversală (perpendiculară (⊥), axă transversală). Toate elementele imbricate (de primul nivel) sunt dispuse conform axa principală. În mod implicit, axa principală este orizontală și direcționată de la stânga la dreapta (>), iar axa transversală este în mod corespunzător verticală și direcționată de sus în jos (v).
Axele principale și transversale pot fi schimbate, apoi elementele vor fi amplasate de sus în jos (v) și când nu se mai potrivesc în înălțime, se vor deplasa de la stânga la dreapta (>) - adică axele pur și simplu schimbate locurile . În acest caz, începutul și sfârșitul aranjamentului elementelor nu se schimbă - se schimbă doar direcțiile (axele)! Acesta este motivul pentru care trebuie să vă imaginați axele din interiorul containerului. Totuși, nu ar trebui să ne gândim că există niște axe „fizice” și ele influențează ceva. Axa aici este doar direcția de mișcare a elementelor din interiorul containerului. De exemplu, dacă am specificat alinierea elementelor la centrul axei principale și apoi am schimbat direcția acestei axe principale, atunci alinierea se va schimba: elementele au fost la mijloc pe orizontală, dar au devenit la mijloc pe verticală... Vezi exemplul.
O altă caracteristică importantă a Flexbox este prezența rândurilor în direcția transversală. Pentru a le imagina și înțelege, să ne imaginăm: există o axă orizontală principală, sunt multe elemente și nu se „încadează” în container, așa că se mută pe alt rând. Acestea. un container arată astfel: un container cu două rânduri în interior, fiecare rând conținând mai multe elemente. Introdus? Acum amintiți-vă că putem alinia nu numai elemente, ci și rânduri! Cum funcționează acest lucru se vede clar în exemplul pentru proprietate. Și așa arată schematic:
Proprietăți CSS care pot afecta modelul de aspect: float , clear , vertical-align , coloanele nu funcționează în design flexibil - folosesc un model de aspect diferit și aceste proprietăți CSS sunt pur și simplu ignorate...
Proprietăți CSS Flexbox
Flexbox conține diferite regulile cssși pentru a controla întregul design flexibil. Unele trebuie aplicate pe containerul principal, iar altele pe elementele acestui container.
Pentru container
afişa:Activează proprietatea flex pentru element. Această proprietate acoperă elementul în sine și elementele sale imbricate: sunt afectați doar descendenții de primul nivel - vor deveni elemente ale containerului flexibil.
- contracta- elementul se întinde pe toată lățimea și are întregul său spațiu printre blocurile din jur. Rupele de linie apar la începutul și la sfârșitul blocului.
- inline-flex- un element este înfășurat în jurul altor elemente. În acest caz, partea sa internă este formatată ca element bloc, iar elementul în sine este formatat ca inline.
flex și inline-flex diferă prin faptul că interacționează diferit cu elementele din jur, similar cu display:block și display:inline-block .
direcție flexibilă:Schimbă direcția axei principale a containerului. Axa transversală se modifică în consecință.
- rând (implicit)- direcția elementelor de la stânga la dreapta (>)
- coloană- direcția elementelor de sus în jos (v)
- rând-invers- direcția elementelor de la dreapta la stânga (<)
- coloană-invers- direcția elementelor de jos în sus (^)
Controlează transferul elementelor care nu se potrivesc în container.
- nowrap (implicit)- elementele imbricate se așează pe un rând (cu direcție=rând) sau într-o coloană (cu direcție=coloană) indiferent dacă încap sau nu în container.
- înfășura- include elemente de mișcare pe rândul următor dacă nu se potrivesc în container. Acest lucru permite deplasarea elementelor de-a lungul axei transversale.
- înfășurare-invers- la fel ca wrap, doar transferul nu va fi in jos, ci in sus (in sens invers).
Combină atât proprietățile de direcție flexibilă, cât și proprietățile de înfășurare flexibilă. Ele sunt adesea folosite împreună, astfel încât proprietatea flex-flow a fost creată pentru a ajuta la scrierea mai puțin de cod.
flex-flow acceptă valorile acestor două proprietăți, separate printr-un spațiu. Sau puteți specifica o singură valoare pentru orice proprietate.
/* flex-direction only */ flex-flow: row; flex-flow: rând-invers; flex-flow: coloană; flex-flow: coloană-invers; /* flex-wrap only */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* ambele valori simultan: flex-direction și flex-wrap */ flex-flow: row nowrap; flex-flow: înfășurare coloană; flex-flow: coloană-reverse wrap-reverse; justificare-conținut:
Aliniază elementele de-a lungul axei principale: dacă direcția=rând, atunci pe orizontală și dacă direcția=coloană, apoi pe verticală.
- flex-start (implicit)- elementele vor merge de la început (s-ar putea să rămână ceva spațiu la sfârșit).
- flex-end- elementele sunt aliniate la sfârșit (spațiul va rămâne la început)
- centru- în centru (spațiul va rămâne în stânga și în dreapta)
- spațiu-între- elementele cele mai exterioare sunt presate pe margini (spațiul dintre elemente este distribuit uniform)
- spatiu-in jur- spatiul liber este distribuit uniform intre elemente (elementele cele mai exterioare nu sunt presate de margini). Spațiul dintre marginea recipientului și elementele exterioare va fi la jumătate față de spațiul dintre elementele din mijlocul rândului.
- spațiu-uniform
Aliniază rândurile care conțin elemente de-a lungul axei transversale. La fel ca justify-content numai pentru axa opusă.
Acestea. dacă flex-direction: row , atunci această proprietate va alinia rândurile invizibile pe verticală (¦). Este important de reținut aici că înălțimea blocului trebuie stabilită rigid și trebuie să fie mai mare decât înălțimea rândurilor, altfel rândurile în sine vor întinde containerul și orice aliniere a acestora devine lipsită de sens, deoarece nu există spațiu liber între ele... Dar când flex-direction: coloană , atunci rândurile se mișcă orizontal (>), iar lățimea containerului este aproape întotdeauna mai mare decât lățimea rândurilor și alinierea rândurilor are sens imediat...
Această proprietate este rareori necesară și este folosită mai des de elementele de aliniere (vezi mai jos).
- întindere (implicit)- rândurile se întind pentru a umple rândul complet
- flex-start- rândurile sunt grupate în partea de sus a containerului (s-ar putea să rămână ceva spațiu la sfârșit).
- flex-end- rândurile sunt grupate în partea de jos a containerului (spațiul va rămâne la început)
- centru- rândurile sunt grupate în centrul containerului (spațiul va rămâne la margini)
- spațiu-între- randurile exterioare sunt presate de margini (spatiul dintre randuri este distribuit uniform)
- spatiu-in jur- spațiul liber este distribuit uniform între rânduri (elementele cele mai exterioare nu sunt presate de margini). Spațiul dintre marginea recipientului și elementele exterioare va fi la jumătate față de spațiul dintre elementele din mijlocul rândului.
- spațiu-uniform- la fel ca spatiul-in jur, doar distanta dintre elementele exterioare si marginile recipientului este aceeasi ca intre elemente.
Aliniază elementele de-a lungul axei transversale într-un rând (rând invizibil). Acestea. Rândurile în sine sunt aliniate prin align-content , iar elementele din aceste rânduri (rânduri) sunt aliniate prin align-items și de-a lungul axei transversale. Nu există o astfel de împărțire de-a lungul axei principale, nu există conceptul de rânduri și elementele sunt aliniate prin justify-content .
- întindere (implicit)- elementele sunt întinse pentru a umple linia complet
- flex-start- elementele sunt presate la începutul rândului
- flex-end- elementele sunt presate până la capătul rândului
- centru- elementele sunt aliniate la centrul rândului
- de bază- elementele sunt aliniate la linia de bază a textului
Pentru elementele containerului
creștere flexibilă:Setează factorul de mărire al elementului atunci când există spațiu liber în container. Flex-grow implicit: 0 i.e. niciunul dintre elemente nu ar trebui să crească și să umple spațiul liber din recipient.
Creștere flexibilă implicită: 0
- Dacă specificați flex-grow: 1 pentru toate elementele, atunci toate se vor întinde în mod egal și se vor umple tot spațiul liber din container.
- Dacă specificați flex-grow: 1 la unul dintre elemente, atunci va umple tot spațiul liber din container și aliniamentele prin justify-content nu vor mai funcționa: nu există spațiu liber, nimic de aliniat...
- Dacă unul dintre ele are flex-grow:2 atunci va fi de 2 ori mai mare decât toate celelalte
- Dacă toate cutiile flexibile din interiorul unui container flexibil au flex-grow:3, atunci acestea vor avea aceeași dimensiune
- Dacă unul dintre ele are flex-grow:12, atunci va fi de 4 ori mai mare decât toate celelalte
Cum functioneaza? Să presupunem că un container are 500 px lățime și conține două elemente, fiecare cu o lățime de bază de 100 px. Aceasta înseamnă că mai sunt 300 de pixeli liberi în container. Acum, dacă specificăm flex-grow: 2; , iar al doilea flex-grow: 1; , atunci blocurile vor ocupa toată lățimea disponibilă a containerului, iar lățimea primului bloc va fi de 300px, iar al doilea de 200px. Acest lucru se explică prin faptul că 300px de spațiu liber disponibil în container a fost distribuit între elemente într-un raport de 2:1, +200px pentru primul și +100px pentru al doilea.
Notă: valoarea poate fi specificată numere fracționare, de exemplu: 0,5 - flex-grow:0,5
flex-contractie:Setează factorul de reducere al elementului. Proprietatea este opusul flex-grow și determină modul în care elementul ar trebui să se micșoreze dacă nu mai rămâne spațiu liber în container. Acestea. proprietatea începe să funcționeze atunci când suma dimensiunilor tuturor elementelor este mai mare decât dimensiunea containerului.
Flex-shrink implicit:1
Să presupunem că containerul are 600px lățime și conține două elemente, fiecare 300px lățime - flex-basis:300px; . Acestea. două elemente umplu complet recipientul. Dați primul element flex-shrink: 2; , iar al doilea flex-shrink: 1; . Acum să reducem lățimea containerului cu 300px, adică. elementele trebuie să se micșoreze cu 300 px pentru a se potrivi în interiorul containerului. Se vor micșora într-un raport de 2:1, adică. primul bloc se va micșora cu 200px, iar al doilea cu 100px, iar noile dimensiuni ale elementelor vor deveni 100px și 200px.
Notă: puteți specifica numere fracționale în valoare, de exemplu: 0,5 - flex-shrink:0,5
baza flexibila:Setează lățimea de bază a elementului - lățimea înainte ca alte condiții care afectează lățimea elementului să fie calculate. Valoarea poate fi specificată în px, %, em, rem etc. Lățimea finală va depinde de lățimea de bază și de valorile flex-grow, flex-shrink și conținutul din interiorul blocului. În modul automat, elementul primește o lățime de bază în raport cu conținutul din interiorul său.
Implicit: automat
Uneori poate fi util să setați rigid lățimea unui element prin proprietatea familiară lățime. De exemplu, latime: 50%; va însemna că elementul din interiorul containerului va fi exact 50%, dar proprietățile flex-grow și flex-shrink vor funcționa în continuare. Acest lucru poate fi necesar atunci când elementul este întins de conținutul din interiorul său, mai mult decât este specificat în flex-basis... Exemplu.
flex-basis va fi „rigid” dacă specificați zero stretch și shrink: flex-basis:200px; flex-grow:0; flex-contractie:0; - pe scurt il poti scrie asa: flex:0 0 200px; .
flex: (creștere pe bază de contracție)Intrare scurtă trei proprietăți: flex-grow flex-shrink flex-basis .
Implicit: flex: 0 1 auto
Cu toate acestea, puteți specifica una sau două valori:
Flex: niciunul; /* 0 0 auto */ /* număr */ flex: 2; /* flex-grow (flex-basis merge la 0) */ /* nu este un număr */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: continut; /* flex-basis: content */ flex: 1 30px; /* flex-grow și flex-basis */ flex: 2 2; /* flex-grow și flex-shrink (flex-basis merge la 0) */ flex: 2 2 10%; /* flex-grow și flex-shrink și flex-basis */ align-self:
Vă permite să modificați proprietatea align-items, numai pentru un singur element.
Implicit: din containerul align-items
- întinde- elementul este întins pentru a umple linia complet
- flex-start- elementul este apăsat la începutul liniei
- flex-end- elementul este presat până la capătul liniei
- centru- elementul este aliniat la centrul liniei
de bază- elementul este aliniat la linia de bază a textului
Vă permite să schimbați ordinea (poziția, poziția) unui element din rândul general.
Implicit: comanda: 0
În mod implicit, elementele au ordine: 0 și sunt plasate în ordinea apariției lor în codul HTML și în direcția rândului. Dar dacă modificați valoarea proprietății de ordine, atunci elementele vor fi aranjate în ordinea valorilor: -1 0 1 2 3 ... . De exemplu, dacă specificați ordinea: 1 pentru unul dintre elemente, atunci toate zerourile vor merge mai întâi, iar apoi elementul cu 1.
Astfel, de exemplu, puteți muta primul element până la capăt fără a schimba direcția de mișcare a elementelor rămase sau a codului HTML.
Note
Care este diferența dintre baza flexibilă și lățime?
Mai jos sunt diferențele importante dintre baza flexibilă și lățime/înălțime:
- Când utilizați proprietatea flex, 3 valori (flex-grow/flex-shrink/flex-basis) pot fi combinate și scrise pe scurt, dar pentru creșterea sau micșorarea lățimii trebuie să scrieți separat. De exemplu: flex:0 0 50% == lățime:50%; flex-contractie:0; . Uneori este doar incomod.
flex-basis funcționează numai pentru axa principală. Aceasta înseamnă că cu flex-direction:row flex-basis controlează lățimea, iar cu flex-direction:column controlează înălțimea. .
flex-basis se aplică numai elementelor flexibile. Aceasta înseamnă că dacă dezactivați flex pentru un container, această proprietate nu va avea niciun efect.
Elementele absolute ale containerului nu participă la construcția flexibilă... Aceasta înseamnă că flex-basis nu afectează elementele flexibile ale unui container dacă acestea sunt poziție absolută: absolută. Ei vor trebui să specifice lățimea/înălțimea.
Dacă este posibil, preferați totuși baza flexibilă. Utilizați lățimea numai atunci când baza flexibilă nu este adecvată.
Diferența dintre baza flexibilă și lățime - un bug sau o caracteristică?
Conținutul din interiorul unui element flexibil îl extinde și nu se poate extinde dincolo de acesta, cu excepția cazului în care lățimea elementului este setată prin lățime sau lățime maximă . flex-basis nu va face față aici... Vezi exemplul:
Exemple de layout Flex
Nicăieri în exemple nu sunt folosite prefixe pentru compatibilitatea între browsere. Am făcut asta pentru o citire ușoară a css. Prin urmare, trebuie să vă uitați la exemplele mai mult sau mai puțin recente versiuni cromate sau firefox.
# 1 Exemplu simplu cu aliniere verticală și orizontală
Să începem de la bun început exemplu simplu- aliniere verticală și orizontală simultan și la orice înălțime de bloc, chiar și cauciuc.
Sau așa, fără un bloc înăuntru:
#1.2 Separarea (ruperea) între elementele blocului flexibil
Pentru a aranja elementele containerului de-a lungul marginilor și a selecta aleatoriu un element după care va exista o pauză, trebuie să utilizați proprietatea marjei cu valoarea auto .
#2 Meniu adaptiv pe flex
Să creăm un meniu chiar în partea de sus a paginii. Pe un ecran lat ar trebui să fie în dreapta. În medie, aliniați-vă la mijloc. Iar pe cel mic, fiecare element trebuie să fie pe o linie nouă.
# 3 Adaptive 3 coloane
Acest exemplu arată cum să faci rapid și convenabil 3 coloane, care, atunci când sunt restrânse, se vor transforma în 2 și apoi în 1.
Vă rugăm să rețineți că acest lucru se poate face și fără utilizarea mass-media reguli, totul este flexibil.
Accesați jsfiddle.net și modificați lățimea secțiunii „rezultat”.
# 4 Blocuri adaptive pe flex
Să presupunem că trebuie să scoatem 3 blocuri, unul mare și două mici. În același timp, este necesar ca blocurile să se adapteze la micile ecrane. Noi facem:
Accesați jsfiddle.net și modificați lățimea secțiunii „rezultat”.
#5 Galerie cu flexibilitate și tranziție
Acest exemplu arată cât de repede poți face un acordeon drăguț cu imagini folosind flex. Acordați atenție proprietății de tranziție pentru flex.
# 6 Flex to Flex (doar un exemplu)
Sarcina este de a face un bloc flexibil. Astfel încât începutul textului din fiecare bloc să fie pe aceeași linie orizontal. Acestea. Pe măsură ce lățimea se îngustează, blocurile cresc în înălțime. Este necesar ca imaginea să fie în partea de sus, butonul să fie întotdeauna în jos, iar textul din mijloc să înceapă de-a lungul unei linii orizontale...
Pentru a rezolva această problemă, blocurile în sine sunt întinse cu flex și setate la lățimea maximă posibilă. Fiecare bloc intern este, de asemenea, o structură flexibilă, cu o axă rotită flex-direction:coloană; iar elementul din mijloc (unde este textul) este întins flex-grow:1; pentru a umple tot spațiul liber, așa se obține rezultatul - textul începea cu o singură linie...
Mai multe exemple
Suport browser - 97%
Desigur, nu există suport complet, dar toate browserele moderne acceptă modele flexbox. Unele necesită încă prefixe. Pentru o imagine reală, să ne uităm la caniuse.com și să vedem că 96% dintre browserele utilizate astăzi vor funcționa fără prefixe și 97% cu prefixe - și acesta este un indicator excelent pentru utilizarea completă a flexbox.
Pentru a ști ce prefixe sunt relevante astăzi (feb. 2017), voi da un exemplu de toate regulile flexibile cu cu prefixele necesare:
/* Container */ .flex ( afișare: -webkit-box; afișare: -webkit-flex; afișare: -ms-flexbox; afișare: flex; afișare: -webkit-inline-box; afișare: -webkit-inline-flex ; afișare: -ms-inline-flexbox; afișare: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: coloană; -ms-flex-direction: coloană; direcție flex: coloană; -webkit-flex-wrap: înfășurare; -ms-flex-wrap: înfășurare; flex-wrap: înfășurare; -webkit-flex-flow: înfășurare coloană; -ms-flex-flow: coloană wrap; flex-flow: wrap coloană; -webkit-box-pack: justificare; -webkit-justify-content: spațiu între; -ms-flex-pack: justificare; justificare-conținut: spațiu între; -webkit-align -conținut: space-around; -ms-flex-line-pack: distribuie; align-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align : center; align-items: center; ) /* Elemente */ .flex-item ( -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow : 1; -webkit-flex-shrink: 2; -ms-flex-negativ: 2; flex-contractie: 2; -webkit-flex-basis: 100px; -ms-flex-preferred-size: 100px; flex-base: 100px; -webkit-box-flex: 1; -webkit-flex: 1 2 100px; -ms-flex: 1 2 100px; flex: 1 2 100px; -webkit-align-self: center; -ms-flex-item-align: center; align-self: centru; -webkit-box-ordinal-grup: 3; -webkit-comanda: 2; -ms-flex-order: 2; comanda: 2; )
Este mai bine dacă proprietățile cu prefixe merg înaintea proprietății originale.
Nu există prefixe în această listă care să nu fie necesare astăzi (conform caniuse). În general există mai multe prefixe.
Crom | Safari | Firefox | Operă | I.E. | Android | iOS |
---|---|---|---|---|---|---|
20- (vechi) | 3.1+ (vechi) | 2-21 (vechi) | 10 (interpolare) | 2.1+ (vechi) | 3.2+ (vechi) | |
21+ (nou) | 6.1+ (nou) | 22+ (nou) | 12.1+ (nou) | 11+ (nou) | 4.4+ (nou) | 7.1+ (nou) |
- (nou) - sintaxă nouă:display:flex; .
- (tweener) - vechea sintaxă neoficială din 2011: afișaj: flexbox; .
- (vechi) - sintaxa veche din 2009: afisare: caseta;
Video
Ei bine, nu uitați de videoclip, uneori este și interesant și de înțeles. Iată câteva dintre cele populare:
Link-uri utile pe Flex
flexboxfroggy.com - joc educațional flexbox.
Flexplorer este un constructor vizual de cod flexibil.
Modulul Flexbox Layout (Flexible Box) își propune să ofere o modalitate mai eficientă de a poziționa, alinia și distribui spațiul liber între elementele dintr-un container, chiar și atunci când dimensiunea acestora este necunoscută în prealabil și/sau dinamic (de unde și cuvântul „flex”).
Ideea de bază a aspectului flexibil este de a oferi unui container capacitatea de a modifica lățimea/înălțimea (și ordinea) elementelor sale pentru a umple cel mai bine. spatiu disponibil(în principal pentru a se potrivi pe toate tipurile și dimensiunile de ecrane). Un container Flexbox extinde elementele pentru a umple spațiul liber sau le micșorează pentru a evita debordarea.
Cel mai important, Flexbox este agnostic direcțional, spre deosebire de aspectele convenționale (casetele bazate pe poziționarea verticală și elementele inline bazate pe poziționare orizontală). Deși funcționează suficient de bine, le lipsește flexibilitatea de a suporta aplicații mari sau complexe (mai ales când vine vorba de schimbarea orientării, redimensionarea, întinderea, micșorarea etc.).
Notă. Flexbox este mai potrivit pentru componentele aplicației și layout-urile mici, în timp ce CSS Grid este proiectat pentru layout-uri mai mari.
Bazele și terminologia
Deoarece Flexbox este un modul întreg și nu o singură proprietate, conține o mulțime de lucruri diferite, inclusiv o mulțime de proprietăți. Unele dintre ele sunt menite să fie setate la containerul lor (elementul părinte, cunoscut sub numele de „container flexibil”), în timp ce altele sunt menite să fie setate la elementele copil (cunoscute ca „elementele flexibile”).
Dacă sistem conventionalÎn timp ce aspectul se bazează pe direcții de bloc și linie, Flexbox se bazează pe „direcții de flux flexibil”. Vă rugăm să aruncați o privire la acest grafic din specificație care explică ideea de bază a Flexbox.
Practic, elementele vor fi amplasate de-a lungul axa principală(de la începutul principal la sfârşitul principal) sau axul transversal(de la început la capăt).
Suport pentru browser
Modulul de aranjare a casetei flexibile CSS
Chrome pentru Android
Browserul Blackberry, începând cu versiunea 10, acceptă noua sintaxă.
Proprietăți pentru container
Proprietăți pentru elemente
Proprietăți pentru elementul părinte (container Flex)
afişa
Definește un container flexibil; șir sau bloc depinde de valoarea transmisă. Activează contextul flexibil pentru toate elementele sale secundare directe.
Container ( afișare: flex; /* sau inline-flex */ )
Vă rugăm să rețineți că coloanele CSS nu afectează containerul flexibil.
flex-direcție
Setează axa principală, determinând astfel direcția elementelor situate în container. Flexbox (pe lângă ambalajul său opțional) este un concept de aspect unidirecțional. Gândiți-vă la elementele flexibile în primul rând ca la rânduri orizontale sau coloane verticale.
Container (direcție flexibilă: rând | rând invers | coloană | coloană inversă; )
- rând (implicit)- de la stânga la dreapta în ltr ; de la dreapta la stânga în rtl;
- rând-invers- de la dreapta la stânga în ltr; de la stânga la dreapta în rtl;
- coloană- la fel ca și rândul, doar de sus în jos;
- coloană-invers- la fel ca rând-invers, doar de jos în sus;
flex-wrap
În mod implicit, articolele vor încerca să umple doar un rând. Puteți modifica acest comportament și puteți permite elementelor să se încadreze rândul următor, daca este necesar.
Container( flex-wrap: nowrap | wrap | wrap-reverse; )
- nowrap (implicit)- toate elementele flexibile vor fi amplasate pe o singură linie;
- înfășura- elementele flex vor fi amplasate pe mai multe linii, de sus in jos;
- înfășurare-invers- elementele flex vor fi amplasate pe mai multe linii, de jos in sus;
justifica-conținut
Definește alinierea de-a lungul axei majore. Acest lucru ajută la distribuirea spațiului liber rămas după ce toate articolele flexibile cu lățime fixă și nefixă au atins dimensiunea maximă. De asemenea, ajută la asigurarea unui anumit control asupra alinierii elementelor atunci când depășesc o linie.
Container ( justificare-conținut: flex-start | flex-end | centru | spațiu-între | spațiu-în jur; )
- flex-start (implicit)- elementele sunt presate la începutul liniei;
- flex-end- elementele sunt presate până la capătul liniei;
- centru- elementele sunt situate central de-a lungul liniei;
- spațiu-între- elementele sunt asezate uniform pe linie; primul element este la începutul liniei, ultimul element este la sfârșitul liniei;
- spatiu-in jur- elementele sunt așezate uniform pe o linie cu spațiu egal lângă ele. Rețineți că vizual spațiul nu este egal, deoarece toate elementele au același spațiu pe ambele părți. Primul element va avea o unitate de spațiu pe partea containerului, dar două unități între el și următorul element, deoarece următorul element are și o unitate pe ambele părți.
alinierea elementelor
Această proprietate determină comportamentul elementelor flexibile de-a lungul axei transversale linia curentă. Gândiți-vă la asta ca , dar pentru axa transversală (perpendiculară pe axa principală).
Container ( alinierea elementelor: flex-start | flex-end | centru | linie de bază | stretch; )
- flex-start - elementele sunt plasate la începutul axei transversale;
- flex-end elementele sunt plasate la capătul axei transversale;
- centru - elementele sunt situate în centrul axei transversale;
- de bază- elementele sunt aliniate de-a lungul liniei de bază;
- întindere (implicit)- se întinde pentru a umple întregul recipient (respectând totuși lățimea min / lățime max);
alinierea-conținut
Notă. Această proprietate nu are efect atunci când există un singur rând de elemente flexibile.
Container ( align-content: flex-start | flex-end | centru | spațiu între | spațiu-în jur | întindere; )
- flex-start- liniile sunt amplasate la începutul containerului;
- flex-end- liniile sunt amplasate la capatul containerului;
- centru- liniile sunt plasate în centrul containerului;
- spațiu-între- liniile sunt distribuite uniform, prima linie este situată la începutul containerului și ultima linie la sfârșitul;
- spatiu-in jur- liniile sunt distribuite uniform, cu aceeași distanță între ele;
- întindere (implicit)- liniile sunt întinse pe toată lățimea pentru a ocupa spațiul rămas;
Proprietăți pentru elementele copil (elementele Flex)
Ordin
În mod implicit, toate elementele sunt aranjate în ordinea lor inițială. Cu toate acestea, proprietatea order controlează ordinea în care elementele sunt aranjate în container.
Articol (comanda:
flex-creștere
Proprietatea determină capacitatea elementului de a crește în dimensiune dacă este necesar. Este nevoie de o valoare adimensională ca proporție, care determină cât spațiu liber ar trebui să ocupe în interiorul containerului elementul.
Dacă toate elementele au proprietatea flex-grow setată la 1, atunci spațiul liber din interiorul containerului va fi distribuit uniform între toate elementele. Dacă unul dintre elemente are o valoare setată la 2, atunci elementul va ocupa de două ori mai mult spatiu decât restul (cel puțin va încerca).
Articol (flex-grow:
Numerele negative nu pot fi specificate.
flex-bază
Determină dimensiunea implicită a unui element, înainte de a aloca spațiul rămas. Aceasta ar putea fi lungimea (20%, 5rem, etc.) sau cuvânt cheie. Cuvântul cheie auto înseamnă „arata ca proprietatea mea lățime sau înălțime”. Cuvântul cheie de conținut înseamnă că „dimensiunea se bazează pe conținutul elementului” - acest cuvânt cheie nu este încă foarte bine susținut, deci este dificil de testat și chiar mai dificil de știut care sunt frații săi min-content , max-content și fit-conținut fac.
Articol (bază flexibilă:
Dacă setați valoarea la 0 atunci spatiu suplimentarîn jurul conținutului nu vor fi luate în considerare. Dacă este setat la automat, spațiu suplimentar va fi alocat pe baza valorii.
contracta
Aceasta este prescurtarea pentru , și . Al doilea și al treilea parametri (flex-shrink și flex-basis) sunt opționali. Valoarea implicită este setată la 0 1 auto.
Articol ( flex: niciunul | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
alinierea-sine
Această proprietate vă permite să înlocuiți alinierea implicită (sau un set folosind proprietatea) pentru elementele flexibile individuale.
Vă rugăm să consultați explicația proprietății pentru a înțelege valorile disponibile.
Item ( align-self: auto | flex-start | flex-end | centru | linie de bază | stretch; ) .item ( align-self: auto | flex-start | flex-end | centru | linie de bază | stretch; )
Rețineți că float , clear și vertical-align nu au niciun efect asupra unui element flexibil.
Exemple
Să începem cu cel mai simplu exemplu, rezolvator de probleme, care se întâmplă aproape în fiecare zi: centrare perfectă. Nu ar putea fi mai ușor dacă utilizați Flexbox.
Părinte ( afișare: flex; înălțime: 300 px; ) .copil ( lățime: 100 px; înălțime: 100 px; margine: automată; )
Acest lucru depinde de marja care este setată la automat pe containerul flexibil care consumă spațiu suplimentar. Astfel, setarea marginii verticale la auto pe un element va face ca elementul să fie perfect centrat pe ambele axe.
Acum să folosim câteva proprietăți suplimentare. Luați în considerare o listă de 6 elemente, toate cu o dimensiune fixă din punct de vedere estetic, dar pot fi automate. Dorim ca acestea să fie distribuite uniform de-a lungul axei orizontale, astfel încât atunci când browserul este redimensionat, totul va fi bine (fără interogări media!).
Flex-container ( afișare: flex; flex-flow: înfășurare rând; justificare-conținut: spațiu-în jur; )
Gata! Orice altceva sunt doar niște probleme de design. Mai jos este un exemplu pe CodePen, asigurați-vă că mergeți acolo și încercați să redimensionați ferestrele pentru a vedea ce se întâmplă.
Să încercăm altceva. Imaginați-vă că avem o navigare aliniată la dreapta în partea de sus a ecranului, dar vrem ca aceasta să fie centrată pe ecrane de dimensiuni medii și într-o singură coloană pe ecrane mici. La fel de ușor ca o plăcintă.
Navigare ( display: flex; flex-flow: row wrap; justify-content: flex-end; ) @media all și (max-width: 800px) ( .navigation (justify-content: space-around; ) ) @media all și (lățime maximă: 500 px) ( .navigation ( direcție flexibilă: coloană; ) )
Să încercăm să facem ceva și mai bun jucându-ne cu flexibilitatea articolelor noastre flexibile! Ce zici de un aspect pe trei coloane pentru dispozitive mobile, cu un antet și un subsol care se întinde pe întreaga lățime a ecranului și nu depinde de ordinea inițială a elementelor.
Wrapper ( display: flex; flex-flow: row wrap; ) .header, .main, .nav, .aside, .footer (flex: 1 100%; ) @media all și (min-width: 600px) ( .aside ( flex: 1 auto; ) ) @media all and (min-width: 800px) ( .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside- 2 ( ordine: 3; ) .footer ( ordine: 4; ) )
Proprietăți aferente
Erori
Desigur, Flexbox nu este lipsit de erori. Cea mai bună colecție pe care am văzut-o este prezentată de Flexbugs de la Philip Walton și Greg Whitworth. Sursa deschisa un loc pentru a urmări toate erorile, așa că cred că cel mai bine este să lăsați un link.
Despre cât de ușor este să lucrezi cu Flexbox folosind exemplul de aspect al unui șablon de site de știri.
Crede-mă, nu este nevoie de o analiză detaliată a tuturor aspectelor de lucru cu Flexbox dacă vrei să începi să-l folosești acum. În acest tutorial, autorul vă va prezenta unele dintre proprietățile Flexbox și va crea un „aspect de știri” precum cel pe care l-ați putea vedea pe site-ul The Guardian.
Motivul pentru care autorul folosește Flexbox este numărul mare de posibilități pe care le oferă:
- ușurința creării coloanelor adaptive;
- crearea coloanelor aceeasi inaltime;
- capacitatea de a presa conținutul pe fundul recipientului.
Să mergem!
1. Începeți prin a crea două coloane
Crearea coloanelor când Ajutor CSS a implicat întotdeauna anumite dificultăţi. Multă vreme, flotanții și/sau tabele au fost (și sunt) utilizate pe scară largă pentru a îndeplini această sarcină, dar fiecare dintre aceste metode a avut (și are) dezavantajele sale.La rândul său, Flexbox simplifică acest proces, având o serie de avantaje precum:
Scrierea unui cod mai curat: tot ce trebuie să facem este să creăm un container cu o regulă display: flex;
- flexibilitate: putem redimensiona, întinde și alinia coloanele schimbând câteva linii de CSS;
- marcaj semantic;
- în plus, folosind Flexbox nu este nevoie să anulați împachetarea pentru a evita comportamentul imprevizibil al aspectului.
Să începem prin a crea două coloane, dintre care una va ocupa 2/3 din lățimea containerului nostru și una dintre care va ocupa 1/3 din el.
Există două elemente aici:
Container coloane;
- două elemente copil coloană, dintre care unul are clasa suplimentara coloana-principala, pe care o vom folosi mai târziu pentru a face coloana mai lată.
Coloane ( afișare: flex; ) .coloană ( flex: 1; ) .coloană principală ( flex: 2; )
Deoarece coloana-principala are o valoare flex egală cu 2
, atunci această coloană va ocupa de două ori mai mult spațiu decât a doua.
Să adăugăm puțin design vizual și, în final, obținem:
Faceți clic pentru a vedea în acțiune
2. Faceți din fiecare coloană un container flexbox
Fiecare dintre cele doua coloane va contine mai multe articole dispuse vertical, asa ca din aceste doua elemente trebuie sa realizam, la randul sau, si containere flexbox.Deci, avem nevoie de articolele:
Pozitionat vertical in interiorul coloanei containerului;
- a ocupat tot spațiul disponibil.
Regulă flex-direcție: coloană specificat pentru container, împreună cu regula flex: 1, specificat pentru un element copil, permite articolului să umple tot spațiul vertical disponibil, în timp ce înălțimea primelor două coloane rămâne neschimbată.
Faceți clic pentru a vedea în acțiune
3. Realizarea unui recipient dintr-un articol
Acum, pentru a ne extinde și mai mult capacitățile, să reprezentăm fiecare articol ca un container flexbox. Fiecare astfel de recipient va conține:Titlu;
- paragraful;
- panou informativ cu numele autorului și numărul de comentarii;
- un fel de imagine adaptativă.
Aici folosim Flexbox pentru a împinge bara de informații în partea de jos a elementului. Uită-te la rezultatul pe care ne așteptăm să-l obținem.
Și iată codul în sine:
.articol ( display: flex; flex-direction: column; flex-basis: auto; /* Setează dimensiunea inițială a elementului în funcție de conținutul său */ ) .article-body ( display: flex; flex: 1; flex- direction: column; ) .article-content (flex: 1; /* Conținutul umple orice spațiu rămas, împingând astfel bara de informații în partea de jos */ )
Elementele din interiorul unui articol sunt dispuse vertical datorită utilizării unei reguli flex-direcție: coloană.
Am aplicat și proprietatea flex: 1 la element articol-conținut, întinzându-l astfel la tot spațiul disponibil și apăsând articol-info spre fund. Înălțimea coloanelor în acest caz nu contează.
Faceți clic pentru a vedea în acțiune
4. Adăugați mai multe coloane imbricate
De fapt, avem nevoie ca coloana din stânga să includă mai multe coloane. Prin urmare, trebuie să înlocuim al doilea element responsabil pentru articol cu un recipient coloane, pe care l-am folosit mai devreme.
Deoarece dorim ca prima coloană imbricată să fie mai largă, vom adăuga clasa la element coloană-imbricată, iar în CSS indicăm:
Coloană imbricată (flex: 2; )
Acum această coloană va fi de două ori mai largă decât a doua.
Faceți clic pentru a vedea în acțiune
5. Realizarea primului articol cu aspect orizontal
Primul nostru articol este de fapt mare. Pentru a utiliza eficient spațiul de pe ecranul monitorului, să-i schimbăm orientarea la orizontală.Primul articol ( flex-direction: row; ) .first-article .article-body (flex: 1; ) .first-article .article-image (înălțime: 300px; comandă: 2; padding-top: 0; lățime: 400px;)
Proprietate Ordin V în acest caz, joacă un rol important, deoarece vă permite să schimbați ordinea elementelor HTML fără a schimba marcajul HTML. De fapt, articol-imagineîn cod vine înaintea elementului articol-corp, dar se comportă ca și cum ar fi stat după el.
Faceți clic pentru a vedea în acțiune
6. Realizarea unui layout adaptiv
Acum totul arată așa cum ne-am dorit, deși puțin strivit. Să remediam acest lucru adăugând flexibilitate aspectului nostru.Unul dintre lucrurile grozave despre Flexbox este că puteți șterge pur și simplu o regulă display:flexîn container pentru a-l dezactiva complet (Flexbox), în timp ce restul proprietăților sale (cum ar fi alinierea elementelor sau contracta) va rămâne în funcțiune.
Ca rezultat, putem activa aspectul adaptiv utilizând Flexbox numai atunci când este necesar.
Deci vom șterge display:flex de la selectori .coloaneȘi .coloană, în schimb „ambalându-le” într-o interogare media:
Ecran @media și (lățime minimă: 800 px) ( .columns, .column ( display: flex; ) )
Asta e tot! Pe ecranele cu rezoluție scăzută, toate articolele vor fi amplasate unul peste altul, iar pe ecranele cu o rezoluție de peste 800 de pixeli - în două coloane.
7. Adăugarea de finisaje
Pentru a face aspectul să arate mai atractiv pe ecrane mari, să adăugăm câteva modificări CSS:Ecran @media și (lățime minimă: 1000 px) ( .prim-articol (flex-direcție: rând; ) . primul articol . articol-corp (flex: 1; ) . primul articol . articol-imagine ( înălțime: 300px ; comanda: 2; padding-top: 0; lățime: 400px; ) .coloană-principală ( flex: 3; ) . coloană imbricată ( flex: 2; ) )
Conținutul primului articol este aliniat orizontal: textul este în partea stângă, iar imaginea este în dreapta. De asemenea, coloana principală este acum mai largă (75%). Același lucru este valabil și pentru coloana imbricată (66%).
Și iată rezultatul final!
Faceți clic pentru a vedea în acțiune
Concluzie
Acum puteți vedea singur că puteți utiliza Flexbox în proiectele dvs. fără să vă adânciți măcar în toate complexitățile sale, iar aspectul creat este un exemplu clar în acest sens. Cel puțin, autorul speră cu adevărat așa.Flexbox introduce o nouă modalitate de a afișa casete într-un aspect folosind css3 și este proiectat pentru a facilita poziționarea elementelor unul față de celălalt. În acest articol, ne vom uita la cea mai nouă sintaxă pentru modelul flexbox. Versiunile de browser se schimbă destul de repede în aceste zile, așa că vei fi la curent când modelul flexbox este acceptat pe scară largă în proiectele din viața reală.
Pentru ce este Flexbox?
Dezvoltatorii au folosit mult timp tabele, elemente float, blocuri inline și alte proprietăți CSS pentru a oferi blocurilor aspectul dorit. Cu toate acestea, niciunul dintre instrumentele de mai sus nu a fost conceput pentru a crea pagini și aplicații complexe care sunt utilizate în aproape fiecare proiect în prezent. Lucruri simple precum centrarea verticală au fost destul de greu de realizat. Crearea unui aspect bazat pe grile lichide este, în general, considerată apogeul profesionalismului, motiv pentru care cadrele CSS bazate pe grile au devenit larg răspândite. Deci, dacă multe proiecte folosesc adesea grile fluide, blocuri de înălțime egală, centrarea verticală a blocurilor etc., atunci se pune întrebarea: „De ce nu există încă o caracteristică care să permită ca aceste lucruri să fie făcute rapid și ușor?”
Flexbox își propune să rezolve toate aceste probleme!
Starea specificațiilor și suport pentru browser
Modelul flexbox este în dezvoltare de patru ani. Browserele folosesc diferite versiuni experimentale ale specificației. În septembrie 2012, a treia revizuire a sintaxei Flexbox de către un grup de dezvoltatori W3C a obținut statutul de candidat W3C. Aceasta înseamnă că W3C aprobă sintaxa actuală și dă voie browserelor să utilizeze prefixele de furnizor.
Istoricul modificărilor specificațiilor Flexbox:
- Proiect de lucru iulie 2009 (afișare: casetă;)
- Schiță de lucru martie 2011 (afișare: flexbox;)
- Schiță de lucru noiembrie 2011 (afișare: flexbox;)
- Schiță de lucru martie 2012 (afișare: flexbox;)
- Proiect de lucru iunie 2012 (afișare: flex;)
- Recomandarea candidatului septembrie 2012 (afișare: flex;)
Browsere primite suport rapid Flexbox. Chrome 22+, Opera 12.1+, IE10, Firefox >=16 acceptă deja Flexbox. Recomand să folosiți unul dintre aceste browsere pentru a vizualiza exemplele.
Concept și terminologie
În timp ce flexbox este conceput pentru a facilita aranjarea blocurilor într-un aspect, ceea ce a fost adesea dificil și, în unele situații, problematic în trecut, va dura ceva timp pentru a rezolva aceste probleme folosind Flexbox în proiectele din viața reală. Terminologia modelului poate face dificil de utilizat. Să vedem cum funcționează modelul Flexbox.
Modelul Flexbox include un container flexibil și articole flexibile. Un container flex trebuie să aibă o proprietate de afișare setată la flex sau inline-flex . Cu valoarea flex, containerul este un element bloc, iar cu inline-flex, este un element inline.
Exemplu de declarație de container flexibil:
Flex-container ( display: -webkit-flex; display: flex; )
Containerul Flex este părintele articolelor flexibile. Pot exista oricâte puncte de flexibilitate doriți. Tot ce se află în afara containerului flexibil și în interiorul articolelor flexibile este afișat ca de obicei. Prin urmare, Flexbox definește modul în care articolele flexibile vor fi așezate în interiorul unui container flexibil.
Articolele flexibile sunt situate în interiorul containerului flexibil de-a lungul liniei flexibile. În mod implicit, există o singură linie flexibilă într-un container flexibil. Iată un exemplu cu două elemente aranjate de-a lungul liniei flexibile de la stânga la dreapta în mod implicit:
Flex-container( display: -webkit-flex; display: flex; lățime: 700px; culoare de fundal: verde; margine: 20px auto; ) .flex-item( culoare de fundal: roșu; lățime: 100px; înălțime: 100px; margine: 5px; culoare: #fff; )
Moduri de scriere (moduri de afișare a conținutului)
O parte importantă a personalizării flexbox este schimbarea direcției liniei flexibile. În mod implicit, direcția liniei flexibile coincide cu direcția textului: de la stânga la dreapta, de sus în jos.
Un nou modul de moduri de scriere a apărut în specificație. Vă permite să schimbați direcția textului de la dreapta la stânga sau chiar pe verticală.
Acest modul este în curs de dezvoltare, dar Chrome acceptă proprietatea CSS de direcție. Dacă în exemplul anterior setăm proprietatea de direcție: rtl (dreapta la stânga), atunci nu numai direcția de afișare a conținutului de la dreapta la stânga se va schimba, ci și direcția liniei flexibile, ceea ce va duce la o schimbare în schema.
Corp (direcție: rtl; ) .flex-container ( afișare: -webkit-flex; afișare: flex; lățime: 700px; înălțime: 240px; culoare de fundal: verde; margine: 10px auto; ) .flex-item ( fundal- culoare: roșu; lățime: 100px; înălțime: 100px; margine: 5px; )
Din acest exemplu putem concluziona de ce este terminologia Flexbox acest moment atât de abstractă. Nu putem indica pur și simplu „dreapta”, „stânga”, „jos”, „sus” atunci când nu avem idee în ce limbă este scrisă pagina (poate arabă - stil de scriere de la dreapta la stânga!).
Axele principale și transversale
Pentru a fi independent de modul de afișare a conținutului direcției, Flexbox utilizează conceptul de axă principală și axă transversală. Liniile flexibile urmează axa principală. Axa transversală este perpendiculară pe axa principală. Numele punctelor de început și de sfârșit, precum și direcția fiecărei axe:
- Start principal
- Capătul principal
- Direcția principală (uneori numită Direcția fluxului)
- Cross Start
- Cross End
- Direcția transversală
Înainte de a continua, este important să înțelegem terminologia axei majore și transversale. Totul într-un model flexbox este poziționat în raport cu aceste două axe. În toate exemplele noastre, modul de amestecare a modului de scriere a fost de la stânga la dreapta, de sus în jos. Dar ar trebui să rețineți că acest lucru s-ar putea să nu fie întotdeauna cazul.
Proprietățile containerului flexibil:
Flex-direcție
Proprietatea flex-direction vă permite să schimbați axele unui container flexibil. În mod implicit, proprietatea flex-direction este row. În acest caz, elementele flexibile sunt aranjate în funcție de modul de scriere. Permiteți-ne să vă reamintim din nou că aceasta înseamnă că direcția este de la stânga la dreapta, de sus în jos (în mod implicit).
Alte valori posibile:
- row-reverse : Startul principal și Sfârșitul principal sunt inversate. Chiar dacă modul de scriere este specificat ca ltr (de la stânga la stânga), atunci elementele flexibile vor fi tot de la dreapta la stânga.
- coloană : axa principală și axa transversală sunt schimbate. Dacă modul de afișare a conținutului este orizontal, atunci elementele flexibile vor fi în continuare poziționate vertical.
- coloană-invers: similar cu coloana, dar inversat.
Să modificăm proprietatea flex-direction în coloană din exemplul anterior:
Flex-container ( afișare: -webkit-flex; afișare: flex; -webkit-flex-direction: coloană; flex-direction: coloană; lățime: 700px; înălțime: 240px; culoare de fundal: verde; margine: 10px automat; ) .flex-element (culoare de fundal: roșu; lățime: 100 px; înălțime: 100 px; margine: 5 px; )
Acum articolele flexibile sunt poziționate vertical.
justifica-conținut
justify-content controlează plasarea elementelor flexibile de-a lungul axei principale. Valori posibile:
- flex-start (implicit)
- flex-end
- centru
- spațiu-între
- spatiu-in jur
Să ne uităm la un exemplu cu justify-content: center, astfel încât elementele flexibile să fie centrate pe axa principală:
Flex-container ( afișare: -webkit-flex; afișare: flex; -webkit-justify-content: centru; justify-content: centru; lățime: 700px; înălțime: 240px; culoare de fundal: verde; margine: 10px automat; ) .flex-element (culoare de fundal: roșu; lățime: 100 px; înălțime: 100 px; margine: 5 px; )
flex-start , flex-end și centru funcționează prin conectarea împreună de-a lungul unei axe majore. Dar spațiul dintre și spațiul din jur distribuie spațiul liber între elementele flexibile într-un anumit mod. Iată o diagramă din specificație care arată distribuția conținutului justificat:
alinierea elementelor
align-items este o proprietate suplimentară pentru justify-content . align-items controlează afișarea elementelor flexibile în raport cu axa perpendiculară. Valori posibile:
- flex-start (implicit)
- flex-end
- centru
- de bază
- întinde
Să ne uităm la utilizarea proprietății align-items:center, care permite elementelor flexibile să fie centrate vertical în jurul unei axe perpendiculare:
Flex-container ( afișare: -webkit-flex; afișare: flex; -webkit-align-items: center; align-items: centru; lățime: 700px; înălțime: 240px; culoare de fundal: verde; margine: 10px automat; ) .flex-element (culoare de fundal: roșu; lățime: 100 px; înălțime: 100 px; margine: 5 px; )
Deci, flex-start , flex-end și centru sunt întotdeauna plasate împreună. Valoarea de întindere este destul de simplă: face ca articolele flexibile să se întindă de la Cross Start la Cross End, adică vertical în raport cu containerul flexibil. linia de bază forțează elementele flexibile să fie poziționate de-a lungul liniei de bază. Linia de bază este calculată pe baza conținutului inline al elementelor flexibile. Iată o explicație mai bună a modului în care funcționează aceste valori:
Flex-wrap
În toate exemplele luate în considerare, containerul flexibil avea o linie flexibilă. Utilizarea proprietății flex-wrap vă va permite să creați un container flexibil cu sume diferite linii flexibile. Valori posibile:
- nowrap (implicit)
- înfășurare-invers
Dacă flex-wrap este setat la wrap , sunt incluse linii flexibile suplimentare în elementele flexibile, dar numai dacă elementele flexibile nu au suficient spațiu pentru a se potrivi pe o linie flexibilă. Sunt adăugate linii flexibile suplimentare în direcția perpendiculară pe axă.
Exemplu de utilizare a flex-wrap:
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; lățime: 700px; înălțime: 240px; culoare de fundal: verde; margine: 10px automat; ) .flex-element (culoare de fundal: roșu; lățime: 300 px; înălțime: 100 px; margine: 5 px; )
Valoarea wrap-reverse este similară cu valoarea wrap, cu excepția faptului că noi linii flexibile sunt adăugate în direcția opusă de-a lungul axei perpendiculare.
alinierea-conținut
align-content modifică comportamentul proprietății flex-wrap. Această valoare este similară cu elementele de aliniere, dar în loc să alinieze elementele flexibile, aliniază liniile flexibile. După cum vă puteți aștepta, valorile sunt similare:
- întindere (implicit)
- flex-start
- flex-end
- centru
- spațiu-între
- spatiu-in jur
Principiul de funcționare al acestor valori este similar cu conținutul justificat și elementele de aliniere.
Exemplu de aliniere-conținut: centru
flex-flow
Această proprietate combină proprietățile flex-direcție și flex-wrap.
flux flexibil:
Flex-container ( -webkit-flex-flow: coloană nowrap; flex-flow: coloană nowrap; )
Proprietățile articolelor flexibile
Un articol flexibil este un bloc copil al unui container flexibil. Conținutul unui container flexibil se referă la elementul flexibil al containerului respectiv. Conținutul articolului flexibil este afișat ca de obicei. De exemplu, în timp ce este valabil proprietate de plutire, articolele flex nu reacţionează la acest lucru în niciun fel. Flotantele pot fi, de asemenea, amplasate în interiorul articolului flexibil în sine.
După cum se spune, articolele flexibile au o dimensiune principală și o dimensiune încrucișată. Dimensiunea principală este dimensiunea elementului flexibil în direcția axei principale, iar Dimensiunea transversală este în direcția axei transversale. De fapt, lățimea sau înălțimea unui articol flexibil poate fi dimensiunea principală și dimensiunea transversală, în funcție de axa containerului flexibil.
Să ne uităm la proprietățile care reglează comportamentul articolelor flexibile.
Ordin
Ordinea este cea mai simplă proprietate. Ordinea elementelor flexibile este determinată de aranjarea elementelor flexibile în HTML. În acest exemplu, vom modifica valoarea proprietății de comandă a unui articol flexibil la -1 și vom vedea cum aceasta modifică ordinea altor articole flexibile.
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: centru; align-content: centru; lățime: 700px; înălțime : 240px; fundal-culoare: verde; margine: 10px automat; .flex-element (culoare fundal: roșu; lățime: 300px; înălțime: 100px; margine: 5px; ) .first ( -webkit-order: -1; comandă : -1; )
Această proprietate poate fi utilă pentru accesibilitate atunci când ordinea elementelor flexibile în HTML ar trebui să fie într-un singur sens, dar afișarea elementelor flexibile într-o ordine diferită.
Marja
Probabil că ești familiarizat cu marja: efectul automat. Flexbox face ceva similar, dar cu și mai multe capacități. „auto” consumă spațiu suplimentar. Această proprietate poate fi utilizată pentru diferite poziționări ale articolelor flexibile.
De exemplu, să declarăm margin-right: auto; pentru primul articol flexibil, în timp ce acesta va oferi tot spațiul liber posibil în dreapta sa:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: centru; lățime: 700px; înălțime: 240px; culoarea fundal: verde; margine: 10px automat; ) .flex-element (culoare de fundal: roșu; lățime: 100px; înălțime: 100px; margine: 5px; ) .flex-item:first-child( margin-right: auto; )
Acum să ne uităm la un exemplu despre cum funcționează margin: auto
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: centru; lățime: 700px; înălțime: 240px; culoarea fundal: verde; margine: 10px automat; ) .flex-element (culoare de fundal: roșu; lățime: 100px; înălțime: 100px; margine: 5px; ) .flex-item:first-child (marja: auto; )
alinierea-sine
Proprietatea align-self a unui articol suprascrie proprietatea align-items a containerului flexibil. Valori posibile similare elementelor de aliniere:
- întindere (implicit)
- flex-start
- flex-end
- centru
- de bază
În acest exemplu, vom atribui diferite valori ale proprietății align-self elementelor:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: centru; lățime: 700px; înălțime: 240px; culoarea fundal: verde; margine: 10px automat; ) .flex-item (culoare fundal: roșu; lățime: 100px; min-height:70px; margine: 5px; ) .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: : linia de bază; align-self: linia de bază; ) .item5 ( -webkit-align-self: linia de bază; align-self: linia de bază; padding: 2em 0; ) .item6 ( -webkit-align-self: întinderea; align-self: intinde;)
contracta
Am ajuns în sfârșit la proprietatea flex în Flexbox. Flex determină modul în care articolele flexibile vor folosi spațiul disponibil de-a lungul axei principale. Să luăm în considerare fiecare dintre valorile posibile.
Contracta:
Această sintaxă specifică cât de mult din elementul flexibil ar trebui să ocupe lățimea totală a containerului flexibil. În exemplul următor, primul element flexibil va ocupa 2/4 din spațiul liber, iar celelalte două elemente flexibile vor ocupa 1/4 fiecare:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: centru; lățime: 700px; înălțime: 240px; culoarea fundal: verde; margine: 10px automat; ) .flex-element (culoare fundal: roșu; lățime: 100px; min-height:70px; margine: 5px; ) .item1 ( -webkit-flex: 2; flex: 2; ) .item2 ( -webkit-flex: 1 ; flex: 1; ) .item3 ( -webkit-flex: 1; flex: 1; )
Adesea trebuie să distribuiți elementele uniform pe lățime. Pentru a face acest lucru, trebuie doar să setați valoarea a acestei proprietati 1 și toate articolele flexibile vor fi distribuite pe toată lățimea containerului.
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: centru; lățime: 700px; înălțime: 240px; culoarea fundal: verde; margine: 10px automat; ) .flex-element (culoare fundal: roșu; lățime: 100px; min-height:70px; margine: 5px; ) .item1 ( -webkit-flex: 1; flex: 1; ) .item2 ( -webkit-flex: 1 ; flex: 1; ) .item3 ( -webkit-flex: 1; flex: 1; )
flex: initial
Articolele Flex cu această valoare vor avea o lățime strict fixă, dar numai dacă există spațiu liber (dacă este necesar, micșorați dimensiunea - devine cauciuc).
flex:auto
Punctele flexibile devin complet cauciucate de-a lungul axei principale. Nu funcționează corect în Chrome 23.0.1271.95, deci este mai bine să utilizați flex: 1 .
flex: niciunul
articolele flex devin lățime fixă în toate situațiile
flex avansat
Proprietatea flex poate fi utilizată în modul shrink pentru a specifica selecția flex-grow , flex-shrink și flex-basis într-o singură declarație: contracta:
În cele mai multe cazuri, această sintaxă nu este necesară. Mai mult, aplicarea acestei comenzi rapide necesită o înțelegere profundă a modelului Flexbox. Puteți face ca fiecare dintre proprietățile flex-grow, flex-shrink și flex-base specifice. Recomand insistent să nu folosiți această abreviere: implicit este să dați valori mai rezonabile.
vizibilitate
Când proprietatea de vizibilitate este implementată: collapse; va diferi de vizibilitatea valorilor: ascuns; și afișaj: niciunul; pentru articole flexibile. Cu valoarea de colaps, elementul va folosi dimensiunea încrucișată a containerului flexibil, dar nu va afecta spațiul axei principale. Acest lucru poate fi util pentru adăugarea sau eliminarea dinamică a elementelor flexibile fără a afecta dimensiunea transversală a containerului flexibil.
Vizibilitatea curentă: colaps; nu funcționează corect în browsere. Vizibilitatea curentă: colaps; face același lucru ca vizibilitatea: ascuns; Sunt sigur că situația se va schimba în viitorul apropiat.
Vedeți cum ar trebui să funcționeze valoarea de colaps în specificație (http://www.w3.org/TR/css3-flexbox/#visibility-collapse)
Concluzie
După cum vă puteți imagina, Flexbox este un instrument puternic de design de layout. Este nevoie de o abordare complet nouă pentru afișarea blocurilor. Sper că ați găsit acest articol util și că puteți începe să experimentați cu machete folosind Flexbox acum. Viitorul acestui model este cu adevărat uimitor.