Proprietatea align-content stabilește tipul de aliniere a liniilor în interiorul unui container flexibil de-a lungul axei transversale atunci când există spațiu liber.
Se aplică la: container flexibil.
Valoare implicită: întindere.
Liniile Flex-start sunt poziționate la începutul axei transversale. Fiecare linie următoare este la același nivel cu cea anterioară. flex-end Rândurile sunt poziționate începând de la capătul axei transversale. Fiecare linie anterioară este la același nivel cu următoarea. Liniile centrale sunt centrate pe container. space-between Liniile sunt uniform distanțate în recipient și distanța dintre ele este aceeași. spatiu-in jur Liniile sunt distantate uniform astfel incat spatiul dintre doua linii adiacente sa fie egal. Spațiul alb dinaintea primei linii și după ultima linie este egal cu jumătate din spațiul dintre două linii adiacente. space-evenly Rândurile sunt distanțate uniform. Spațiul alb dinaintea primei linii și după ultima linie are aceeași lățime ca și celelalte linii. întinde Liniile se întind uniform pentru a umple spațiul liber.
Proprietatea align-content aliniază liniile unui container flexibil în interiorul containerului flexibil atunci când există spațiu suplimentar pe axa transversală, similar modului în care justify-content aliniază articolele individuale în cadrul axei principale. Rețineți că această proprietate nu are niciun efect asupra unui container flexibil cu o singură linie. Valorile au următoarele semnificații:
Notă: Numai containerele flexibile cu mai multe linii au vreodată spațiu liber în axa transversală pentru alinierea liniilor, deoarece într-un container flexibil cu o singură linie linia unică se întinde automat pentru a umple spațiul.
Se aplică la: containere flexibile.
Iniţială: întindere.
Liniile Flex-start sunt împachetate spre începutul containerului flexibil. Marginea de pornire transversală a primei linii din containerul flexibil este plasată la nivel cu marginea de pornire transversală a containerului flexibil și fiecare linie ulterioară este plasată la același nivel cu linia anterioară. flex-end Liniile sunt împachetate spre capătul containerului flex. Muchia transversală a ultimei linii este plasată la nivel cu marginea transversală a containerului flexibil și fiecare linie anterioară este plasată la același nivel cu linia următoare. Liniile centrale sunt împachetate spre centrul containerului flexibil. Liniile din containerul flexibil sunt plasate la nivel una cu cealaltă și aliniate în centrul containerului flexibil, cu cantități egale de spațiu între marginea de conținut transversală a containerului flexibil și prima linie din containerul flexibil și între marginea de conținut transversală a containerului flexibil și ultima linie din containerul flexibil. (Dacă spațiul liber rămas este negativ, liniile vor revărsa în mod egal în ambele direcții.) Spațiul dintre linii sunt distribuite uniform în containerul flexibil. Dacă spațiul liber rămas este negativ, această valoare este identică cu flex-start. În caz contrar, marginea de pornire încrucișată a primei linii din containerul flexibil este plasată la același nivel cu marginea de conținut de început încrucișată a containerului flexibil, marginea de capăt încrucișată a ultimei linii din containerul flexibil este plasată la același nivel cu marginea transversală a containerului flexibil. marginea conținutului de capăt a containerului flexibil și liniile rămase în containerul flexibil sunt distribuite astfel încât distanța dintre oricare două linii adiacente este aceeași. space-around Liniile sunt distribuite uniform în containerul flexibil, cu spații de jumătate de dimensiune la fiecare capăt. Dacă spațiul liber rămas este negativ, această valoare este identică cu centrul. În caz contrar, liniile din containerul flexibil sunt distribuite astfel încât distanța dintre oricare două linii adiacente este aceeași, iar distanța dintre primele / ultimele linii și marginile containerului flexibil este jumătate din dimensiunea distanței dintre liniile flexibile. space-evenly Liniile sunt distribuite uniform în containerul flexibil. Dacă spațiul liber rămas este negativ, această valoare este identică cu centrul. În caz contrar, liniile din containerul flexibil sunt distribuite astfel încât distanța dintre fiecare linie flexibilă să fie aceeași. se întinde Liniile se întind pentru a ocupa spațiul rămas. Dacă spațiul liber rămas este negativ, această valoare este identică cu flex-start. În caz contrar, spațiul liber este împărțit în mod egal între toate liniile, mărind dimensiunea crucii acestora.
Flexbox CSS (Modul cu aspect flexibil)- modulul de layout al unui container flexibil - este o modalitate de aranjare a elementelor, bazată pe ideea unei axe.
Flexbox este format din container flexibilși articole flexibile... Articolele Flex pot fi aranjate pe un rând sau pe o coloană, iar spațiul liber rămas este distribuit între ele în diferite moduri.
Modulul flexbox vă permite să îndepliniți următoarele sarcini:
- Aranjați articolele în una din cele patru direcții: de la stânga la dreapta, de la dreapta la stânga, de sus în jos sau de jos în sus.
- Ignorați ordinea de afișare a articolelor.
- Redimensionați automat elementele pentru a se potrivi în spațiul disponibil.
- Rezolvați problema cu centrarea orizontală și verticală.
- Înfășurați articolele în interiorul recipientului fără să se reverse.
- Creați coloane de înălțime egală.
- Creați fixat în partea de jos a paginii.
Flexbox se adresează nevoilor specifice de creare a machetelor unidimensionale, cum ar fi o bară de navigare, deoarece elementele flexibile pot fi așezate doar de-a lungul unei axe.
Pentru o listă a problemelor curente ale modulelor și a soluțiilor între browsere, consultați articolul lui Philip Walton.
Ce este flexbox
Suport pentru browser
IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Crom: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Operă: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera mini: 8
Browser Android: 4.4, 4.1 -webkit-
Chrome pentru Android: 44
1. Concepte de bază
Orez. 1. Modelul flexbox Un set specific de termeni este folosit pentru a descrie un modul Flexbox. Valoarea flex-flow și modul de scriere definesc modul în care acești termeni corespund direcțiilor fizice: sus / dreapta / jos / stânga, axe: verticală / orizontală și dimensiuni: lățime / înălțime.
Axa principală- axa de-a lungul căreia sunt așezate articolele flexibile. Se extinde în dimensiunea principală.
Început principal și final principal- linii care definesc laturile de început și de sfârșit ale containerului flexibil, în raport cu care sunt așezate articolele flexibile (începând de la începutul principal spre capătul principal).
Mărimea principală) - Lățimea sau înălțimea containerului flexibil sau articolelor flexibile, oricare dintre ele se află în dimensiunea de bază, determină dimensiunea de bază a containerului flexibil sau articolului flexibil.
Axa transversală- o axă perpendiculară pe axa principală. Se extinde lateral.
Început încrucișat și final încrucișat- Linii care definesc laturile de început și de sfârșit ale axei transversale în jurul cărora sunt așezate elementele flexibile.
Dimensiune cruce- lățimea sau înălțimea unui container flexibil sau a articolelor flexibile, oricare dintre ele se află în dimensiunea transversală, este dimensiunea lor transversală.
Orez. 2. Mod rând și coloană 2. Container flexibil
Un container flexibil creează un nou context de formatare flexibil pentru conținutul său. Un container flexibil nu este un container bloc, așa că proprietățile CSS precum float, clear, vertical-align nu funcționează pentru elementele copil. De asemenea, containerul flexibil nu este afectat de proprietățile coloană-*, care creează coloane în text și de pseudo-elementele :: prima linie și :: prima literă.
Modelul de aspect flexbox este asociat cu o anumită valoare în proprietatea CSS de afișare a elementului html părinte care conține casetele copil. Pentru a controla elementele folosind acest model, trebuie să setați proprietatea de afișare după cum urmează:
Flex-container (/ * generează un container flexibil la nivel de bloc * / afișa: -webkit-flex; afișa: flex;). Flex-container (/ * generează un container flexibil la nivel de rând * / afișa: -webkit-inline- flex; afișare: inline-flex;)
După setarea acestor valori de proprietate, fiecare copil devine automat un element flexibil, aliniat pe un rând (de-a lungul axei principale). Cu toate acestea, copiii bloc și inline se comportă la fel, de exemplu. lățimea blocurilor este egală cu lățimea conținutului lor, ținând cont de umplutura și marginile elementului.
Orez. 3. Alinierea articolelor în modelul flexbox Dacă blocul părinte conține text sau imagini fără pachete, acestea devin elemente flexibile anonime. Textul este aliniat la marginea de sus a blocului container, iar înălțimea imaginii devine egală cu înălțimea blocului, de exemplu. se deformeaza.
3. Articole flexibile
Articolele flexibile sunt blocuri care reprezintă conținutul unui container flexibil în flux. Un container flexibil creează un nou context de formatare pentru conținutul său, care oferă următoarele caracteristici:
- Pentru articolele flexibile, valoarea proprietății de afișare a acestora este blocată. Valoarea afișată: inline-block; și afișare: tabel-celulă; evaluat în afișaj: bloc; ...
- Spațiul alb dintre articole dispare: nu devine propriul său element flexibil, chiar dacă textul dintre articole este împachetat într-un element flexibil anonim. Conținutul unui element flexibil anonim nu poate fi stilat propriu, dar le va moșteni (cum ar fi setările de font) din containerul flexibil.
- Un element flexibil poziționat absolut nu participă la aspectul unui aspect flexibil.
- Câmpurile marginale ale elementelor flexibile adiacente nu se restrâng.
- Marja și procentele de umplutură sunt calculate din dimensiunea interioară a blocului care conține.
- margine: auto; extinde, absorbind spațiu suplimentar în dimensiunea corespunzătoare. Ele pot fi folosite pentru a alinia sau extinde elementele flexibile adiacente.
- Dimensiunea minimă automată implicită pentru articolele flexibile este dimensiunea minimă a conținutului său, adică min-width: auto; ... Pentru containerele derulante, dimensiunea minimă automată este de obicei zero.
4. Afișați ordinea articolelor flexibile și orientarea
Conținutul unui container flexibil poate fi aranjat în orice direcție și în orice ordine (reordonarea articolelor flexibile în interiorul containerului afectează doar redarea vizuală).
4.1. Direcția axei principale: direcție flexibilă
Proprietatea este specifica containerului flex. Controlează direcția axei principale de-a lungul căreia elementele flexibile sunt stivuite în funcție de modul de scriere curent. Nu moștenit.
| flex-direcție | |
|---|---|
| Valori: | |
| rând | Valoarea implicită este de la stânga la dreapta (în rtl, de la dreapta la stânga). Articolele Flex sunt așezate pe o linie. Direcțiile de început și de capăt principal ale axei principale corespund startului și capătului în linie ale axei în linie. |
| rând-invers | Direcție de la dreapta la stânga (în rtl de la stânga la dreapta). Articolele flexibile sunt așezate într-o linie în raport cu marginea dreaptă a containerului (în rtl - stânga). |
| coloană | Direcție de sus în jos. Elementele flexibile sunt așezate într-o coloană. |
| coloană-invers | Coloană cu elemente în ordine inversă, de jos în sus. |
| iniţială | |
| moşteni | |
Orez. 4. Proprietatea flex-direction pentru limbile de la stânga la dreapta Sintaxă
Flex-container (afișare: -webkit-flex; -webkit-flex-direction: rând-invers; afișare: flex; flex-direction: rând-invers;)
4.2. Controlul multiliniei unui container flexibil: flex-wrap
Proprietatea determină dacă containerul flexibil va fi cu o singură linie sau cu mai multe linii și, de asemenea, setează direcția axelor transversale, care determină direcția în care sunt stivuite noile linii ale containerului flexibil.
În mod implicit, elementele flexibile sunt stivuite pe o singură linie, de-a lungul axei principale. Dacă se revarsă, vor ieși în afara casetei de delimitare a containerului flexibil. Proprietatea nu este moștenită.
Orez. 5. Controlul mai multor linii cu proprietatea Flex-Wrap pentru limbi LTR Sintaxă
Flex-container (afișare: -webkit-flex; -webkit-flex-wrap: înfășurare; afișare: flex; flex-wrap: înfășurare;)
4.3. O prescurtare pentru direcție și multilinie: flex-flow
Proprietatea vă permite să definiți direcțiile axelor principale și transversale, precum și capacitatea de a înfășura elementele flexibile pe mai multe linii, dacă este necesar. Este prescurtarea pentru proprietățile de direcție flexibilă și înfășurare flexibilă. Flex-flow implicit: row nowrap; ... proprietatea nu este moștenită.
Sintaxă
Flex-container (afișare: -webkit-flex; -webkit-flex-flow: înfășurare rând; afișare: flex; flex-flow: înfășurare rând;)
4.4. Ordinea de afișare a articolelor flexibile: comandă
Proprietatea determină ordinea în care elementele flexibile sunt afișate și poziționate în containerul flexibil. Se aplică articolelor flexibile. Proprietatea nu este moștenită.
Inițial, toate articolele flexibile au ordine: 0; ... Dacă specificați o valoare între -1 pentru un element, acesta se mută la începutul cronologiei și o valoare de 1 la sfârșit. Dacă mai multe articole flexibile au aceeași valoare de comandă, acestea vor fi afișate conform comenzii lor inițiale.
Sintaxă
Flex-container (afișare: -webkit-flex; afișare: flex;) .flex-item (-webkit-comanda: 1; comandă: 1;) 
Orez. 6. Afișați ordinea articolelor flexibile
5. Flexibilitatea articolelor flexibile
Un aspect definitoriu al aspectului flexibil este abilitatea de a „plia” articole flexibile prin modificarea lățimii/înălțimii acestora (în funcție de dimensiunea care este pe axa principală) pentru a umple spațiul disponibil în dimensiunea de bază. Acest lucru se face folosind proprietatea flex. Un container flexibil alocă spațiu liber între copiii săi (proporțional cu raportul lor flexibilitate-creștere) pentru a umple recipientul sau îi micșorează (proporțional cu raportul lor flexibilitate-contracție) pentru a preveni debordarea.
Un articol flexibil va fi complet inflexibil dacă valorile sale de flex-creștere și flex-shrink sunt zero, iar flex în caz contrar.
5.1. Dimensionare flexibilă cu o singură proprietate: flex
Proprietatea este prescurtarea pentru proprietățile flex-grow, flex-shrink și flex-base. Valoare implicită: flex: 0 1 auto; ... Puteți specifica una sau toate cele trei valori de proprietate. Proprietatea nu este moștenită.
Sintaxă
Flex-container (afișare: -webkit-flex; afișare: flex;) .flex-item (-webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px;)
5.2. Rata de creștere: flex-grow
Proprietatea controlează cât de mult va crește un element flexibil în raport cu alte elemente flexibile dintr-un container flexibil atunci când se alocă spațiu alb pozitiv. Dacă suma valorilor flex-grow ale elementelor flexibile de pe un rând este mai mică de 1, acestea ocupă mai puțin de 100% din spațiul liber. Proprietatea nu este moștenită.
Orez. 7. Gestionarea spațiului liber în bara de navigare cu flex-grow Sintaxă
Flex-container (afișare: -webkit-flex; afișare: flex;). Flex-item (-webkit-flex-grow: 3; flex-grow: 3;)
5.3. Raport de contracție: flex-contracție
Proprietatea specifică cât de mult se va micșora un element flexibil în raport cu alte elemente flexibile atunci când se alocă spațiu alb negativ. Înmulțit cu dimensiunea bazei flexibile. Spațiul negativ este alocat proporțional cu cât de mult se poate micșora elementul, astfel încât, de exemplu, un articol flexibil mic nu se va micșora până la zero până când un articol flexibil mai mare a fost micșorat vizibil. Proprietatea nu este moștenită.
Orez. 8. Îngustarea articolelor flexibile într-un rând Sintaxă
Flex-container (afișare: -webkit-flex; afișare: flex;). Flex-item (-webkit-flex-shrink: 3; flex-shrink: 3;)
5.4. Dimensiunea bazei: flex-base
Proprietatea stabilește dimensiunea de bază inițială a elementului flexibil înainte ca spațiul liber să fie alocat conform rapoartelor flexibile. Pentru toate valorile, cu excepția auto și conținut, dimensiunea flexibilă de bază este definită în același mod ca lățimea în modurile de scriere orizontală. Procentele sunt raportate la dimensiunea containerului flexibil și, dacă nu este specificată nicio dimensiune, valoarea utilizată pentru flex-basis este dimensiunea conținutului acestuia. Nu moștenit.
Sintaxă
Flex-container (afișare: -webkit-flex; afișare: flex;). Flex-item (-webkit-flex-basis: 100px; flex-basis: 100px;)
6. Alinierea
6.1. Alinierea axei principale: justificare-conținut
Proprietatea aliniază articolele flexibile la axa principală a containerului flexibil prin distribuirea spațiului liber neocupat de articolele flexibile. Când un articol este convertit într-un container flexibil, elementele flexibile sunt grupate împreună în mod implicit (cu excepția cazului în care au o marjă setată pentru ele). Spațierea este adăugată după calcularea valorilor marjei și flex-grow. Dacă elementele au o marjă sau o creștere flexibilă diferită de zero: automat; , proprietatea nu va avea efect. Proprietatea nu este moștenită.
| Valori: | |
| flex-start | Valoare implicită. Articolele flexibile sunt așezate într-o direcție departe de linia de start a containerului flexibil. |
| flex-end | Articolele flexibile sunt așezate într-o direcție departe de linia de capăt a containerului flexibil. |
| centru | Articolele flexibile sunt aliniate la centrul containerului flexibil. |
| spațiu-între | Articolele flexibile sunt distribuite uniform de-a lungul liniei. Primul element flexibil este poziționat la același nivel cu marginea liniei de început, ultimul element flexibil este la același nivel cu marginea liniei de final, iar restul elementelor flexibile de pe linie sunt distanțate astfel încât spațiul dintre oricare două articole adiacente. este același. Dacă spațiul alb rămas este negativ sau dacă există un singur element flexibil pe linie, această valoare este identică cu parametrul flex-start. |
| spatiu-in jur | Elementele flexibile de pe o linie sunt distanțate astfel încât distanța dintre oricare două elemente flexibile adiacente să fie aceeași, iar distanța dintre primele / ultimele elemente flexibile și marginile containerului flexibil să fie jumătate din distanța dintre elementele flexibile. |
| iniţială | Setează valoarea proprietății la valoarea sa implicită. |
| moşteni | Moștenește valoarea proprietății de la elementul părinte. |
Orez. 9. Alinierea articolelor și alocarea spațiului liber folosind proprietatea Justify-Content Sintaxă
Flex-container (afișare: -webkit-flex; -webkit-justify-content: flex-start; afișare: flex; justify-content: flex-start;)
6.2. Alinierea pe axele transversale: align-items și align-self
Articolele flexibile pot fi aliniate la axa transversală a rândului curent al containerului flexibil. align-items setează alinierea pentru toate elementele containerului flexibil, inclusiv elementele flexibile anonime. align-self vă permite să anulați această aliniere pentru elementele flexibile individuale. Dacă oricare dintre marginile transversale ale elementului flexibil sunt automate, align-self nu are efect.
6.2.1. Alinierea elementelor
Aliniază elementele flexibile, inclusiv elementele flexibile anonime, de-a lungul axei transversale. Nu moștenit.
| Valori: | |
| flex-start | |
| flex-end | |
| centru | |
| de bază | Liniile de bază ale tuturor elementelor flexibile implicate în aliniere sunt aceleași. |
| întinde | |
| iniţială | Setează valoarea proprietății la valoarea sa implicită. |
| moşteni | Moștenește valoarea proprietății de la elementul părinte. |
Orez. 10. Alinierea articolelor din container pe verticală Sintaxă
Flex-container (afișare: -webkit-flex; -webkit-align-items: flex-start; afișare: flex; align-items: flex-start;)
6.2.2. Aliniați-vă
Proprietatea este responsabilă pentru alinierea unui singur articol flexibil la înălțimea containerului flexibil. Ignoră alinierea specificată de align-items. Nu moștenit.
| Valori: | |
| auto | Valoare implicită. Elementul flexibil folosește alinierea specificată în proprietatea align-items a containerului flexibil. |
| flex-start | Marginea superioară a elementului flexibil este plasată la același nivel cu linia flexibilă (sau spațiere, având în vedere marginea și marginea specificate a elementului) care trece prin originea axei transversale. |
| flex-end | Marginea de jos a elementului flexibil este poziționată la același nivel cu linia flexibilă (sau spațiere, având în vedere marginea și marginea specificate a elementului) care trece prin capătul axei transversale. |
| centru | Marginile articolului flexibil sunt centrate pe axa transversală din cadrul liniei flexibile. |
| de bază | Elementul flexibil este aliniat la linia de bază. |
| întinde | Dacă dimensiunea încrucișată a elementului flexibil este automată și niciuna dintre marginile încrucișate nu este automată, articolul este întins. Valoare implicită. |
| iniţială | Setează valoarea proprietății la valoarea sa implicită. |
| moşteni | Moștenește valoarea proprietății de la elementul părinte. |
Orez. 11. Aliniați elementele flexibile individuale Sintaxă
Flex-container (afișare: -webkit-flex; afișare: flex;). Flex-item (-webkit-align-self: centru; align-self: centru;)
6.3. Alinierea rândurilor unui container flexibil: aliniere-conținut
Proprietatea aliniază rândurile într-un container flexibil atunci când există spațiu suplimentar pe axa transversală, similar cu alinierea articolelor individuale pe axa principală folosind proprietatea justify-content. Proprietatea nu are niciun efect asupra containerului flexibil cu o singură linie. Nu moștenit.
| Valori: | |
| flex-start | Liniile sunt stivuite spre începutul containerului flexibil. Marginea primei linii este plasată aproape de marginea containerului flexibil, fiecare linie ulterioară este plasată aproape de linia anterioară. |
| flex-end | Liniile sunt stivuite spre capătul containerului flexibil. Marginea ultimei linii este plasată aproape de marginea containerului flexibil, fiecare linie anterioară este plasată aproape de linia următoare. |
| centru | Liniile sunt stivuite spre centrul containerului flexibil. Rândurile sunt apropiate unul de celălalt și aliniate la centrul containerului flexibil cu o distanță egală între marginea de început a conținutului containerului flexibil și prima linie și între marginea de capăt a conținutului containerului flexibil și ultima linie. |
| spațiu-între | Rândurile sunt distanțate uniform în containerul flexibil. Dacă spațiul liber rămas este negativ sau există o singură linie flexibilă în containerul flexibil, această valoare este identică cu flex-start. În caz contrar, marginea primei linii este poziționată aproape de marginea de început a conținutului containerului flexibil, iar marginea ultimei linii este plasată aproape de marginea de sus a conținutului containerului flexibil. Restul liniilor sunt distribuite astfel încât distanța dintre oricare două linii adiacente să fie aceeași. |
| spatiu-in jur | Liniile sunt distanțate uniform într-un container flexibil cu jumătate de spațiu la ambele capete. Dacă spațiul liber rămas este negativ, această valoare este identică cu centrul centului. În caz contrar, liniile sunt distanțate astfel încât distanța dintre oricare două linii adiacente să fie aceeași, iar distanța dintre primele / ultimele linii și marginile conținutului containerului flexibil să fie jumătate din distanța dintre linii. |
| întinde | Valoare implicită. Rândurile de articole flexibile se întind uniform pentru a umple tot spațiul disponibil. Dacă spațiul liber rămas este negativ, această valoare este identică cu flex-start. În caz contrar, spațiul liber va fi împărțit în mod egal între toate liniile, mărind dimensiunea laterală a acestora. |
| iniţială | Setează valoarea proprietății la valoarea sa implicită. |
| moşteni | Moștenește valoarea proprietății de la elementul părinte. |
Orez. 12. Alinierea pe mai multe linii a articolelor flexibile Sintaxă
Flex-container (afișare: -webkit-flex; -webkit-flex-flow: înfășurare rând; -webkit-align-content: flex-end; afișare: flex; flex-flow: înfășurare rând; align-content: flex-end ; înălțime: 100px;)
Nimic nu stă pe loc, tehnologii și standarde se dezvoltă, apar noi tehnici și metode de amenajare a site-ului, de exemplu, amenajarea cu elemente tabulare, pe care nu am luat-o în considerare din motive obiective, a fost înlocuită cu amenajarea cu elemente plutitoare.
Mulți editori de cod au un plugin convenabil pentru marcare rapidă Emmet încorporat în mod implicit sau disponibil pentru descărcare, acesta vă permite să faceți marcajul principal al acestui exemplu după cum urmează: section> div * 3> lorem+ Tab (valoare lorem generează textul prezentat în imaginea de mai jos).
Vă rugăm să rețineți că, cu puțin efort, am făcut ca coloanele aspectului nostru să aibă aceeași înălțime, indiferent de conținutul lor, ceea ce este grozav. Elementele
nu sunt elemente flexibile în mod implicit și sunt localizate în flux al treilea element
Rezultatul exemplului nostru:
Container flexibil în linie
Prin analogie cu elementele bloc, containerele flexibile pot fi inline. Să aruncăm o privire la care este diferența dintre containerele inline flex și cele bloc. În exemplul anterior, ne-am uitat la utilizarea unui container bloc, la fel ca un element bloc obișnuit, acesta se întinde pe întreaga lățime a ecranului și se comportă ca un element obișnuit la nivel de bloc. În ceea ce privește containerele inline flex, acestea devin elemente obișnuite în linie, păstrând elementele flexibile.
În exemplul următor, vom lua în considerare această diferență, deoarece exemplul anterior nu ar fi orientativ, din motivul că dimensiunea elementelor flex copil nu a fost setată în mod explicit și, ca urmare, containerul nostru, fie el inline sau bloc, s-ar comporta la fel și ar ocupa întreaga lățime a ecranului.
În acest exemplu, am plasat Două litere mici și Două containere bloc flex, în interiorul lor am plasat cinci elemente
Pentru a genera rapid un aspect similar folosind Emmet tastați următoarele în editor: div.inline-flex * 2> div * 5 + Tab și același lucru cu o clasă diferită div.flex * 2> div * 5 + Tab.
Aruncă o privire la rezultatul exemplului nostru, diferența dintre containerele inline și block flex ar trebui să fie acum evidentă pentru tine. Un container inline se comportă ca un element inline și ocupă lățimea cerută doar de elementele sale flexibile secundare, iar un container flexibil bloc, indiferent de dimensiunea copiilor săi flexibili, ocupă întreaga lățime a ecranului.
Rezultatul exemplului nostru:
Orez. 205 Un exemplu de diferență dintre containerele inline-flex și containerele flex.
Direcţie? Care direcție?
Direcția elementelor flexibile se formează pe baza poziției a două axe: axa principală containerul flexibil și acesta axul transversal care este mereu localizat perpendicular pe principal... Axa principală în direcția ltr (atributul global HTML dir sau proprietatea direcție CSS cu valoarea ltr) este poziționată de la stânga la dreapta, iar axa transversală este de sus în jos (aceasta este implicit), pentru rtl valoarea este oglindită în mod corespunzător.
În acest articol, vă vom prezenta 5 tehnici pentru rezolvarea problemelor de bază ale aspectului CSS. De asemenea, am adăugat câteva studii de caz din lumea reală pentru a ilustra modul în care aceste tehnici pot fi utilizate.
Faceți coloanele la aceeași înălțime
Poate părea destul de simplu la început, dar această sarcină poate fi enervantă uneori. Utilizarea înălțimii minime nu va funcționa, deoarece odată ce apare un anumit conținut, coloanele vor începe imediat să redimensioneze.
Remedierea acestei probleme cu flexbox nu este, de asemenea, o soluție, deoarece coloanele create cu flexbox CSS vor avea inițial lungime egală. Trebuie doar să introducem un model „fluid” și apoi să ne asigurăm că proprietățile direcției flexibile și ale elementelor de aliniere sunt setate corect.
Rearanjarea elementelor
Odată în trecut, schimbarea dinamică a ordinii anumitor elemente era o sarcină pe care numai JavaScript o putea face. Dar odată cu apariția flexbox, această dificultate nu mai apare, deoarece soluția constă într-o singură proprietate CSS.
Proprietatea comenzii, care ne permite să folosim aspectul flexbox, vorbește de la sine. Ne permite să schimbăm orice număr de elemente „flexibile” și secvența acestora. Singurul parametru al acestei proprietăți este un număr întreg, care determină poziția acestui element, cu cât este mai mare numărul - cu atât este mai mare prioritatea acestui element.
Proprietatea de comandă are multe utilizări. Dacă doriți să vedeți unele dintre ele, puteți arunca o privire la acesta, în care folosim această tehnică pentru a crea o secțiune de comentarii receptivă.
Centrare orizontală și verticală
Alinierea în CSS este încă o problemă destul de serioasă. Chiar dacă apelezi la un motor de căutare, acesta îți va oferi o grămadă de soluții, dintre care majoritatea vor oferi utilizarea de tabele și transformări, ceea ce nu este pe deplin potrivit dacă vorbim de layout responsive.
O soluție simplă ar fi un aspect flexbox, cu care elementele pot fi deplasate trivial de-a lungul planului de coordonate, aliniindu-l după cum doriți.
Pentru a vedea această soluție în acțiune și pentru a afla mai multe despre ea, puteți merge la cea din același thread.
Creați grile complet receptive
Mulți webmasteri se bazează pe diferite biblioteci și cadre CSS pentru a crea grile receptive. Cel mai utilizat instrument în acest domeniu este Bootstrap. Cu toate acestea, nu este singurul de acest fel. Sute de astfel de asistenți au fost deja dezvoltați. Toate funcționează relativ bine și se laudă cu un set impresionant de opțiuni, dar nu vor scăpa niciodată de o problemă - este greoaie. Prin urmare, dacă sunteți o persoană căreia îi place să facă totul pe cont propriu sau pur și simplu nu doriți să puneți un cadru întreg de dragul unei grile, atunci aspectul flexbox vă va ajuta!
Un rând dintr-o grilă flexbox este doar un container. Coloanele orizontale din interiorul acestuia pot fi orice număr de articole, a căror dimensiune este setată folosind flex. Acest model se va adapta la dimensiunea oricărui ecran, astfel încât rezultatul final ar trebui să arate bine pe majoritatea dispozitivelor. Cu toate acestea, dacă decidem că nu există suficient spațiu pe planul orizontal, atunci aspectul poate fi pur și simplu transformat într-unul vertical cu o interogare media.
Puteți vedea variabilitatea acestei tehnici în instrucțiunile: Cel mai simplu mod de a crea.
Crearea unui subsol fix
Flexbox CSS are și o soluție simplă la această problemă. Prin crearea unei pagini care conține un subsol andocat scris prin elemente flexibile, nu trebuie să vă faceți griji că se va mai muta.
Aplicarea afișajului: flex la eticheta corpului ne va permite să folosim „modul flex” atunci când construim întregul aspect. Când totul este gata, partea principală a paginii va fi un element „flexibil”, iar subsolul cu altul, acest lucru va simplifica manipularea pozițiilor lor.
Mai multe informații despre această tehnică veți găsi în articolul „”.
Concluzie
Majoritatea browserelor de astăzi acceptă aspect flexibil, ceea ce înseamnă că este sigur să spunem că flexbox este gata să ajute mulți dezvoltatori.
Sper că ați găsit acest articol util și că v-ați îmbunătățit abilitățile CSS. Noroc!
Flexbox-urile sunt ideale pentru a crea layout-uri de site-uri utilizate pe scară largă, cum ar fi cea cu trei coloane, așa-numitul „Sfântul Graal”, în care toate coloanele trebuie să aibă înălțimea maximă, indiferent de conținutul lor. În acest caz, în codul sursă, conținutul principal merge înainte de navigare, iar pe pagina în sine, conținutul principal merge după navigare.
Asa.
Înainte de apariția flexbox, un astfel de aspect era destul de dificil de obținut fără a utiliza hack-uri. Dezvoltatorii au trebuit adesea să facă lucruri precum adăugarea de markup suplimentar, aplicarea de marje negative și alte trucuri pentru ca lucrurile să se alinieze corect, indiferent de volumul conținutului sau de dimensiunea ecranului. Dar, după cum arată exemplul de mai sus, flexbox este mult mai ușor.
Iată un rezumat al codului. În acest exemplu, facem din elementul #main un container flexibil și lăsăm antetul și subsolul ca elemente bloc. Cu alte cuvinte, doar partea din mijloc devine un flexbox. Iată un fragment care îl face un container flexibil.
#principal (afișaj: flex; înălțime minimă: calc (100vh - 40vh);)
Folosiți doar display: flex pentru a crea un container flexibil. Rețineți că setăm și înălțimea minimă folosind funcția calc () și setăm #main la 100% din înălțimea ferestrei de vizualizare. minusînălțimea capacului și a subsolului (20vh fiecare). Acest lucru asigură că aspectul ocupă toată înălțimea ecranului, chiar dacă există puțin conținut. Drept urmare, subsolul nu se va ridica niciodată și nu va lăsa spațiu liber dedesubt dacă conținutul este mai mic decât înălțimea ecranului.
Calcularea înălțimii minime a fost destul de ușoară având în vedere că am aplicat box-sizing: border-box tuturor elementelor. Dacă nu am făcut-o, atunci ar trebui să adăugăm valoarea de umplutură la sumă pentru a scădea.
După instalarea containerului flex, avem de-a face cu articole flex.
#principal> articol (flex: 1;) #principal> nav, #principal> deoparte (flex: 0 0 20vw; fundal: bej;) #principal> nav (comanda: -1;)
Proprietatea flex este o prescurtare pentru proprietățile flex-grow, flex-shrink și flex-base. În primul caz, am scris o singură valoare, așa că flex stabilește proprietatea flex-grow. În al doilea caz, am scris toate cele trei valori pentru
