Valoare implicită: 0 1 Auto.

W3C recomandă utilizarea proprietății Flex abreviate, în loc de proprietăți individuale, deoarece Flex se resetează corect orice componente nespecificate pentru utilizare tipică.

aliniați-sine.

Alinierea proprietății vă permite să înlocuiți alinierea implicită (sau valoarea specificată prin aliniere) pentru elemente flexibile individuale. Pentru a înțelege valorile disponibile, consultați descrierea elementelor aliniere pentru recipientul Flex.

Valori

Pentru cel de-al treilea și al patrulea element flexibil, alinierea este suprascrisă prin proprietatea alinierei.

Modul Flexbox-Leuauta (Cutie flexibilă - "bloc flexibil", pe acest moment Recomandarea Candidatului W3C) Pune sarcina de a oferi o modalitate mai eficientă de stabilire, nivelare și distribuire a spațiului liber între elementele dintr-un recipient, chiar și atunci când dimensiunea lor este necunoscută și / sau dinamică (prin urmare, cuvântul "flexibil").

Ideea principală a dispozitivului de protecție Flex în container dotată cu capacitatea de a schimba lățimea / înălțimea (și ordinea) elementelor sale pentru cea mai bună umplere a spațiului (în majoritatea cazurilor - pentru a susține toate tipurile de afișaje și dimensiunea ecranelor ). Containerul Flex se întinde pe elementele pentru a completa spațiul liber sau le comprimă pentru a preveni granița.

Cea mai importantă, FlexBox-Leiaut nu depinde de direcție, spre deosebire de legări obișnuite (blocuri, amplasate vertical, iar elementele inline sunt orizontale). În timp ce leiautul obișnuit este excelent pentru paginile web, nu are flexibilitate (fără canalybur) pentru a susține aplicații mari sau complexe (mai ales atunci când vine vorba de schimbarea orientării ecranului, redimensionarea, întinderea, comprimarea etc.).

cometariu: Flexbox-LEUAOUT este cel mai potrivit pentru părțile compozite ale aplicației și leauutica la scară mică, în timp ce grila este mai folosită pentru Ladians o scară largă.

Bazele

pentru că FlexBox este un modul întreg, și nu doar o singură proprietate, combină multe proprietăți. Unele dintre ele trebuie aplicate la container (elementul părinte, așa-numitul flex recipient), în timp ce alte proprietăți se aplică elementelor copilului sau elemente flexibile.

Dacă leucul obișnuit se bazează pe instrucțiunile elementelor de bloc și inline, Flex-Liaut se bazează pe "Direcțiile Flex-Flow". Verificați această schemă din specificațiile care explică ideea de bază a Flex-Leuetov.

Cele mai multe elemente vor fi distribuite fie împreună axa principală (din Începerea principală. inainte de capăt principal.) sau de-a lungul axa transversală (din pornirea încrucișată. inainte de cross-capăt.).

• axa principală - Axa principală de-a lungul căreia se află elementele Flex. Notă, nu este neapărat orizontală, totul depinde de proprietatea direcției flexibile (vezi mai jos).
• Începerea principală. | capăt principal. - Elementele Flex sunt plasate într-un container din poziția inițială de pornire la poziția principală.
• dimensiunea principală. - lățimea sau înălțimea elementului Flex în funcție de valoarea primară selectată. Valoarea principală poate fi o înălțime de lățime sau element.
• axa încrucișată. - Axa transversală perpendiculară pe cea principală. Direcția sa depinde de direcția axei principale.
• pornirea încrucișată. | cross-capăt. - Rândurile flexibile sunt umplute cu elemente și sunt situate într-un recipient din poziția de pornire încrucișată în poziția transversală.
• cross Dimensiune - Lățimea sau înălțimea elementului Flex, în funcție de dimensiunea dimensiunii, este egală cu această magnitudine. Această proprietate coincide cu lățimea sau înălțimea elementului în funcție de dimensiunea dimensiunii.

Proprietăți

afișaj: Flex | Inline-flex;

Se aplică:

Determină recipientul Flex (Inline sau Bloc, în funcție de valoarea selectată), conectează contextul Flex pentru toți descendenții săi imediați.

Ține minte:

• Coloanele CSS nu funcționează cu un recipient flex
• float, Align clar și vertical nu funcționează cu elemente flexibile

direcție flexibilă.

Se aplică: Element parental Flex-container.

Setează axa principală a axei principale, determinând astfel direcția pentru elementele flexibile plasate în recipient.

• rând (implicit): de la stânga la dreapta pentru LTR, dreptul la stânga pentru RTL;
• row-Reverse: dreapta stânga pentru LTR, de la stânga la dreapta pentru RTL;
• coloană: similară cu rândul, sus în jos;
• coloana-Reverse: similară cu rândul-invers, de jos în sus.

flex-wrap.

Se aplică: Element parental Flex-container.

Stabilește dacă recipientul va fi o singură linie sau multi-linie, precum și direcția axei transversale care determină direcția în care vor fi localizate noi linii.

• nowrap (implicit): o singură linie / de la stânga la dreapta pentru LTR, dreapta la stânga pentru RTL;
• Înfășurați: multi-linie / de la stânga la dreapta pentru LTR, dreapta la stânga pentru RTL;
• wrap-Reverse: Multi-Line / dreapta la stânga pentru LTR, de la stânga la dreapta pentru RTL.

flex-flux.

Se aplică: Element parental Flex-container.

Aceasta este o reducere a proprietăților direcției flexibile și a folii flexibile, care, împreună, definesc axa principală și transversală. Implicit necesită valoarea rândului NowRAP.

Se aplică: Element parental Flex-container.

Determină alinierea față de axa principală. Ajută la distribuirea spațiului liber rămas în cazul în care elementele liniei nu sunt "întinderea" sau întinderea, dar și-au atins deja dimensiunea maximă. Permite, de asemenea, într-un fel de a controla alinierea elementelor când șirul este eliberat.

• flex-Start: elementele sunt mutate la începutul liniei;
• flex-end: elementele sunt deplasate până la capătul șirului;
• centrul: elementele sunt aliniate în centrul liniei;
• spațiul - între elementele sunt distribuite uniform (primul element la începutul liniei, ultimul - la sfârșit);
• spațiul - în jurul valorii de: elementele sunt distribuite uniform cu o distanță egală între ele și limitele șirului.

Se aplică: Element parental Flex-container.

Definește comportamentul implicit pentru elementele Flex sunt relative la axa transversală de pe linia curentă. Luați în considerare această versiune de conținut de justificare pentru axa transversală (perpendiculară pe principală).

• flex-Start: Limita de pornire încrucișată pentru elementele este localizată în poziția de pornire încrucișată;
• flex-end: marginea transfrontalieră pentru elementele este situată pe poziția transversală;
• centrul: elementele sunt aliniate în centrul axei transversale;
• linia de bază: elementele sunt aliniate pentru linia de bază;
• stretch (implicit): Elemente sunt întinse, umplând recipientul (luând în considerare lățimea min-lățime / max).

Se aplică: Element parental Flex-container.

ALiniază liniile de containere flexibile în prezența unui spațiu liber pe axa transversală, în același mod ca și conținutul justificat pe axa principală.

cometariu: Această proprietate nu funcționează cu o singură cutie flexibilă.

• flex-Start: Linii sunt aliniate în raport cu începutul recipientului;
• flex-end: rândurile sunt aliniate în raport cu sfârșitul recipientului;
• centrul: Rândurile sunt aliniate în centrul recipientului;
• spațiul - între: rândurile sunt distribuite uniform (prima linie de la începutul liniei, acesta din urmă este la sfârșit);
• spațiu-în jurul valorii: rândurile sunt distribuite uniform cu o distanță egală;
• stretch (implicit): Rândurile sunt întinse, completând spațiu liber.

ordin

Se aplică:

Implicit, elementele Flex sunt situate în ordinea inițială. Cu toate acestea, proprietatea comenzii poate controla ordinea locației lor în recipient.

Ordin:<integer\u003e

flex-cresc.

Se aplică: Un element fiic / element Flex.

Determină pentru elementul Flex capacitatea de a "crește" dacă este necesar. Ia o valoare indexată care servește drept proporție. Acesta determină ce fracțiune dintr-un spațiu liber în interiorul recipientului poate ocupa un element.

Dacă toate elementele au o proprietate flexibilă ca 1, atunci fiecare descendent va primi aceeași dimensiune în interiorul containerului. Dacă ați setat unul dintre descendenți la 2, atunci va dura de două ori mai mult spațiu decât alții.

Flex-cresc:<număr\u003e (Implicit 0)

flex-psihic.

Se aplică: Un element fiic / element Flex.

Determină pentru elementul Flex capacitatea de a comprima dacă este necesar.

Flex-Shrink: (Implicit 1)

Numerele negative nu sunt acceptate.

baza flexibilă.

Se aplică: Un element fiic / element Flex.

Determină dimensiunea implicită pentru element înainte de distribuirea spațiului din container.

Baza flexibilă:<lungime\u003e | Auto (Auto implicit)

contracta

Se aplică: Un element fiic / element Flex.

Aceasta este o reducere pentru creșterea flex-ului, flex-subțire și flexibilă. Al doilea și al treilea parametrii (flex-contracție, flex-bază) sunt opționale. Valoarea implicită este 0 1 Auto.

aliniați-sine.

Se aplică: Un element fiic / element Flex.

Vă permite să înlocuiți alinierea implicită sau în elementele de aliniere, pentru elementele flexibile individuale.

Consultați descrierea proprietății alinierelor pentru o mai bună înțelegere a valorilor disponibile.

Exemple

Să începem cu un exemplu foarte, foarte simplu, care apare aproape în fiecare zi: alinierea exact în centru. Nu este nimic mai ușor dacă utilizați Flexbox.

Acest exemplu se bazează pe faptul că marja din recipientul Flex specificată ca auto absoarbe spațiul inutil, astfel încât sarcina de referință liniile elementului exact în centrul ambelor axe.

Acum, să folosim niște proprietăți. Prezentați un set de 6 elemente de dimensiune fixă \u200b\u200b(pentru frumusețe), dar cu capacitatea de a schimba dimensiunea recipientului. Vrem să le distribuim în mod egal orizontal, astfel încât atunci când este redimensionată fereastra browserului, totul a arătat bine (fără @ Media-Recorder!).

Gata. Orice altceva este o chestiune de înregistrare. Mai jos este localizat CodePen, care demonstrează acest exemplu. Asigurați-vă că încercați să întindeți / stoarce fereastra browserului și să vedeți ce se întâmplă.

Să încercăm altceva. Imaginați-vă că avem nevoie de o navigație aliniată la marginea dreaptă la începutul site-ului nostru, dar dorim să se alinieze în centrul ecranelor de dimensiuni medii și să se transforme într-o singură coloană pe mici. Totul este destul de simplu.

Să încercăm ceva mai bun și să jucăm cu flexibilitatea elementelor flexibile! Ce zici de orientat pe dispozitive mobile Trei aspect cu capac și subsol complet? Și un alt ordin de locație.

Dacă spui scurt, atunci aspectul cu Flexbox ne oferă soluții simple de sarcini odată dificil. De exemplu, atunci când trebuie să aliniați elementul vertical sau apăsați subsolul în partea de jos a ecranului sau pur și simplu introduceți mai multe blocuri într-un rând, astfel încât să ocupe tot ce spațiu liber. Astfel de sarcini sunt rezolvate fără Flex. Dar, de regulă, aceste soluții sunt mai asemănătoare cu "Crupele" - recepții de utilizat CSS nu sunt destinate. În timp ce cu Flexbox, aceste sarcini sunt rezolvate exact așa cum gândește modelul Flex.

CSS Modulul de aspect al casetei flexibile (modul CSS pentru module cu blocuri flexibile), Flexbox scurt, creat pentru a elimina defectele atunci când se creează o varietate de structuri HTML, incluzând adaptate sub lățimi și înălțime diferite și pentru a face un aspect logic și simplu. Și abordarea logică, de regulă, funcționează în locuri neașteptate, unde rezultatul nu a fost verificat - logica noastră!

Flexbox vă permite să controlați elegant cei mai diferiți parametri ai elementelor din interiorul recipientului: direcția, ordinea, lățimea, înălțimea, alinierea de-a lungul și peste, distribuția spațiului liber, întinderea și comprimarea elementelor.

Cunostinte de baza

FlexBox constă dintr-un container și elementele copilului (elemente) (elemente flexibile).

Pentru a include Flexbox, orice Elementul HTML. suficient pentru a atribui afișarea proprietății CSS: Flex; sau afișaj: Inline-Flex; .

După pornirea proprietăților flexibile, sunt create două axe în interiorul recipientului: Main și transversal (perpendicular (⊥), axa încrucișată). Toate elementele imbricate (primul nivel) sunt construite pe axa principală. În mod implicit, axa principală este orizontală și are direcția de la stânga la dreapta (→) și axa încrucișată, respectiv verticală și este direcționată de sus în jos (↓).

Axa principală și încrucișată pot fi schimbate în locuri, atunci elementele vor fi amplasate pe partea de sus (↓) și când se opresc în înălțime, se vor deplasa de la stânga la dreapta (→) - adică axele s-au schimbat pur și simplu în locuri . În același timp, începutul și sfârșitul locației elementelor nu se schimbă - numai direcțiile (axa) Schimbarea! De aceea trebuie să vă imaginați axa din interiorul recipientului. Cu toate acestea, nu este necesar să credem că există niște axe "fizice" acolo și influențează ceva. Axa de aici este doar direcția de mișcare a elementelor din interiorul recipientului. De exemplu, dacă am indicat alinierea elementelor din centrul axei principale și apoi am schimbat direcția acestei axe principale, se va schimba și alinia: elementele erau în mijloc orizontal și oțel în mijloc vertical .. . Vedeți exemplul.

O altă caracteristică importantă a casetei Flex este prezența unui rând în direcția transversală. Pentru a înțelege despre ce vorbim, să ne imaginăm că există o axă orizontală principală, multe elemente și nu "urcă" în recipient, așa că merg la un alt rând. Acestea. Containerul arată astfel: recipientul, în interiorul acesteia două rânduri, în fiecare rând pentru mai multe elemente. Prezentat? Acum amintiți-vă că ne putem alinia vertical nu numai elemente, ci și rânduri! Cum funcționează bine vizibil în exemplul proprietății. Și așa arată schematic:

Proprietăți CSSCeea ce poate afecta modelul de construcție a layout: float, limpede, vertical-align, coloanele nu funcționează în design flex. Folosește un alt model pentru construirea unui aspect și aceste proprietăți CSS sunt pur și simplu ignorate.

CSS Proprietăți Flexbox.

FlexBox conține reguli CSS diferite pentru a controla întregul design Flex. Unele trebuie să fie aplicate la containerul principal, în timp ce altele la elementele acestui container.

Pentru container.

Include bunuri flexibile pentru element. Sub această proprietate, elementul a investit în el: Numai descendenții la primul nivel sunt afectați - ele vor deveni elemente ale flexului containerului.

• contracta - Elementul este întins la întreaga lățime și are spațiul său complet printre blocurile înconjurătoare. Rowing are loc la început și la sfârșitul blocului.
• inline-Flex. - Elementul este raționalizat de alte elemente. În acest caz, partea interioară este formatată ca element de bloc, iar elementul în sine este ca încorporat.

flex și Inline-Flex diferă în faptul că interacționează diferit cu elementele înconjurătoare, cum ar fi afișajul: bloc și afișaj: blocul inline.

Modifică direcția axei principale a containerului. Axa transversală se schimbă în consecință.

• rând (implicit) - direcția elementelor de la stânga la dreapta (→)
• coloană. - Direcția elementelor de sus în jos (↓)
• row-Reverse. - Direcția elementelor din stânga stânga (←)
• coloana-invers. - Direcția elementelor de jos în sus ()

Gestionează transferul elementelor care decompanează la recipient.

• nowrap (implicit) - elementele imbricate sunt situate într-un rând (în timpul direcției \u003d rând) sau într-o coloană (în timpul direcției \u003d coloana), indiferent dacă sunt plasate în recipient sau nu.
• Înfășurați. - Include transferul de articole la rândul următor dacă nu sunt plasate în container. Aceasta include mișcarea elementelor pe axa transversală.
• Înfășurați înapoi. - De asemenea, înfășurarea numai transferul nu va fi în jos și în sus (în direcția opusă).

Combină atât proprietățile flexibile, cât și proprietățile flexibile. Ele sunt adesea folosite împreună, astfel încât proprietatea Flex-Flow a fost creată pentru a scrie mai puțin cod.

flex-Flow acceptă valorile celor două proprietăți, separate de un spațiu. Sau puteți specifica o valoare a oricărei proprietăți.

/ * Doar flex-direcție * / Flex-flux: rând; Flex-flux: Reverse rând; Flex-flux: coloană; Flex-flux: coloană-inversă; / * Numai Flex-Wrap * / Flex-Flow: Nowrap; Flex-flux: învelitoare; Flex-flux: Înfășurarea înfășurată; / * Imediat ambele sensuri: Direcția Flex și Flex-Wrap * / Flex-Flow: ROW NOWRAP; Flex-flux: folie de coloană; Flex-Flow: înfășurarea inversă a coloanei; Justificați-conținut:

Aliniați elementele de pe axa principală: dacă direcția \u003d rând, apoi orizontală și dacă direcția \u003d coloana, apoi pe verticală.

• flex-Start (implicit) - elementele vor merge de la început (la capăt poate exista un loc).
• flex-end. - elementele sunt egalizate de un capăt (locul va rămâne la început)
• centru - în centru (locul va rămâne stânga și dreapta)
• spațiu-între. - elementele extreme sunt presate la margini (locul dintre elemente este distribuit uniform)
• spațiu-în jur. - Spațiul liber este distribuit uniform între elemente (elementele extreme nu sunt presate pe margini). Spațiul dintre marginea recipientului și elementele extreme va fi de două ori mai mic decât spațiul dintre elementele din mijlocul rândului.
• spațiu-uniform

Aliniază rangurile în care se află elementele de pe axa transversală. La fel ca și a justifica conținutul numai pentru axa opusă.

Notă: funcționează când există cel puțin 2 rânduri, adică Dacă există doar 1 rând, nimic nu se întâmplă.

Acestea. Dacă direcția Flex: rând, această proprietate va alinia rândurile invizibile pe verticală. Este important de observat că înălțimea blocului trebuie să fie stabilită rigid și ar trebui să fie mai mare decât înălțimea seriei, altfel rândurile în sine vor întinde recipientul și alinierea lor își pierde semnificația, pentru că nu există spațiu liber între ele .. . Dar când direcția flexică: coloana, atunci rândurile se deplasează orizontal → și lățimea recipientului este aproape întotdeauna mai mare decât lățimea seriei și alinierea rândurilor dobândește imediat sensul ...

• stretch (implicit) - Rânduri se întinde complet șirul
• flex-start. - Rândurile sunt grupate în partea superioară a recipientului (poate exista un loc în cele din urmă).
• flex-end. - rândurile sunt grupate în partea de jos a containerului (locul va rămâne la început)
• centru - rândurile sunt grupate în centrul containerului (locul va rămâne pe margini)
• spațiu-între. - Rândurile extreme sunt presate spre margini (locul dintre rânduri este distribuit uniform)
• spațiu-în jur. - Spațiul liber este distribuit uniform între rânduri (elementele extreme nu sunt presate spre margini). Spațiul dintre marginea recipientului și elementele extreme va fi de două ori mai mic decât spațiul dintre elementele din mijlocul rândului.
• spațiu-uniform - De asemenea, spațiul-în jurul valorii de, numai distanța în elementele extreme la marginile containerului este aceeași cu atât între elemente.

Aliniați elementele de pe axa transversală din interiorul rândului (linia invizibilă). Acestea. Rândurile în sine sunt aliniate prin intermediul conținutului de aliniere și elementele din aceste rânduri (corzi) prin aliniere și toate acestea pe axa transversală. Nu există o astfel de separare de axa principală, nu există concepte de serie, iar elementele sunt aliniate prin intermediul unui conținut justificat.

• stretch (implicit) - Elemente se întinde complet șirul
• flex-start. - elementele sunt presate la începutul rândului
• flex-end. - elementele sunt presate pe capătul rândului
• centru - elementele sunt de nivelare în centrul rândului
• de bază - elementele sunt aliniate de textul de bază

Pentru elementele de containere

Specifică factorul de creștere al elementului în prezența unui spațiu liber în recipient. Implicit Flex-cresc: 0 i.e. Numărul elementelor ar trebui să crească și să completeze un spațiu liber în recipient.

Implicit Flex-crescă: 0

• Dacă toate elementele indică creșterea flexibilă: 1, atunci toți se întind în mod egal și umple tot ce spațiu liber în recipient.
• Dacă unul dintre elemente indică creșterea flexibilă: 1, atunci va umple tot spațiul liber din recipient și alinierea prin intermediul unei lucrări de conținut justificate nu va fi în măsură să lucreze: nu există nimic pentru a alinia spațiul liber ...
• Când cresc Flex: 1. Dacă unul dintre ei are Flex-Grow: 2, va fi de 2 ori mai mult decât oricine altcineva
• Dacă toate blocurile Flex din interiorul recipientului Flex au Flex-cresc: 3, atunci vor avea aceeași dimensiune
• Cu Flex-cresc: 3. Dacă unul dintre ei are Flex-Grow: 12, va fi de 4 ori mai mare decât oricine altcineva

Cum functioneaza? Să presupunem că recipientul are o lățime de 500px și conține două elemente, fiecare dintre ele are o lățime de bază de 100px. Prin urmare, 300 de pixeli liberi rămân în recipient. Acum, dacă specificați Flex-Grow: 2 primul element; , și al doilea Flex-cresc: 1; Blocurile vor lua întreaga lățime disponibilă a containerului, iar lățimea primului bloc va fi de 300px, iar al doilea 200px. Acest lucru se explică prin faptul că spațiul liber de 300px disponibil în container a fost distribuit între elementele din raportul 2: 1, + 200px al primului și + 100px al doilea.

Notă: În valoarea pe care o puteți specifica numere fracționate, de exemplu: 0.5 - Flex-cresc: 0.5

Specifică factorul de reducere a elementului. Caracteristica este opusă creșterea flexibilă și determină modul în care elementul trebuie comprimat dacă nu există spațiu liber în recipient. Acestea. Proprietatea începe să lucreze atunci când suma dimensiunilor tuturor elementelor este mai mare decât dimensiunea recipientului.

Implicit Flex-Shrink: 1

Să presupunem că recipientul are o lățime de 600px și conține două elemente, fiecare dintre acestea având o lățime de 300px - flex-bază: 300px; . Acestea. Două elemente umple complet recipientul. Primul element va indica Flex-Shrink: 2; , și cel de-al doilea Flex-Shrink: 1; . Reducând acum lățimea recipientului pe 300px, adică Elementele trebuie să fie cu un 300px care să fie amplasat în interiorul containerului. Acestea vor fi comprimate într-un raport de 2: 1, adică Prima unitate se va alătura 200px, iar al doilea la 100px și noile dimensiuni ale elementelor vor fi 100px și 200px.

Notă: În valoarea puteți specifica numerele fracționate, de exemplu: 0.5 - flex-contracție: 0.5

Setează lățimea de bază a elementului - lățimea înainte de a fi calculată condițiile rămase care afectează lățimea elementului. Valoarea poate fi specificată în PX, EM, REM,%, VW, VH etc. Lățimea finală va depinde de lățimea de bază și de valorile lui Flex-cresc, flex-contracție și conținut în interiorul blocului. Cu Auto, elementul primește o lățime de bază în raport cu conținutul din interiorul acestuia.

Implicit: Auto.

Uneori este mai bine să instalați rigid lățimea elementului prin proprietatea obișnuită a lățimii. De exemplu, lățimea: 50%; Aceasta va însemna că elementul din interiorul recipientului va fi exact 50%, cu toate acestea, proprietățile Flex-Grow și Flex-Shrink vor funcționa. Acest lucru poate fi necesar atunci când elementul este întins prin conținut în interiorul acesteia, mai specificat în mod flexibil. Exemplu.

baza flexibilă va fi "dură" dacă resetați tracțiune și comprimare: flex-bază: 200px; Flex-cresc: 0; Flex-contracție: 0; . Toate acestea pot fi scrise ca Flex: 0 0 200px; .

Înregistrare scurtă a trei proprietăți: Flex-Grow Flex-Shrink flex-bază.

Implicit: Flex: 0 1 Auto

Cu toate acestea, puteți specifica una și două valori:

Flex: Nici unul; / * 0 0 Auto * / / * Număr * / Flex: 2; / * Flex-cresc (flex-bază merge la 0) * / / * nu număr * / flex: 10em; / * Flex-bază: 10em * / flex: 30px; / * Flex-bază: 30px * / flex: Auto; / * Flex-bază: Auto * / Flex: conținut; / * Flex-bază: conținut * / flex: 1 30px; / * Flex-cresc și flex-bază * / flex: 2 2; / * Flex-cresc și flex-contracție (flex-bază merge 0) * / flex: 2 2 10%; / * Flex-cresc și flex-psihic și flex-bază * / align-sine:

Vă permite să schimbați proprietatea de aliniere, numai pentru un element separat.

Implicit: de la containerul de articole aliniere

• Întinde. - elementul este întins prin umplerea șirului
• flex-start. - elementul este presat la începutul liniei
• flex-end. - elementul este apăsat spre capătul șirului
• centru - elementul este îndreptat în centrul liniei

de bază - elementul este aliniat de linia de bază a textului

Vă permite să modificați ordinea (poziția, poziția) elementului din rândul general.

Implicit: Comandă: 0

În mod implicit, elementele au comanda: 0 și puneți în ordinea apariției lor în codul HTML și direcția rândului. Dar dacă schimbați valoarea proprietății comenzii, elementele vor fi construite în ordinea valorilor: -1 0 1 2 3 .... De exemplu, dacă unul dintre elemente indică ordinea: 1, atunci veți merge mai întâi la toate zero și apoi un element de la 1.

Deci, este posibil, de exemplu, un prim element care să se transforme în cele din urmă, fără a schimba direcția de mișcare a altor elemente sau cod HTML.

Notează

Care este diferența dintre flex-bază de la lățime?

Sub diferențe importante între flex-base și lățime / înălțime:

flex-bază funcționează numai pentru axa principală. Aceasta înseamnă că atunci când direcția flexică: Baza flexibilă a rândului controlează lățimea (lățimea) și când direcția Flex: coloana controlează înălțimea (înălțimea). .

baza flexibilă se aplică numai elementelor flexibile. Deci, dacă dezactivați Flex la recipient, această proprietate nu va avea efect.

Elementele absolute ale containerului nu participă la designul Flex ... și, prin urmare, flex-baza nu afectează elementele containerului Flex dacă acestea sunt absolut poziționate: absolut. Ei vor trebui să specifice lățimea / înălțimea.

• Când utilizați valorile Flex Proprietăți 3 (flex-cresc / flex-shrink / flex-bază), puteți combina și scrie scurt și pentru lățimea de creștere sau micșorare trebuie să scrieți separat. De exemplu: Flex: 0 0 50% \u003d\u003d Lățimea: 50%; Flex-contracție: 0; . Uneori este doar incomod.

Dacă este posibil, dați încă o bază flexibilă. Utilizați lățimea numai atunci când flex-baza nu este potrivită.

Diferențe flex-bază de la lățime - Bug sau Fich?

Conținutul din interiorul elementului Flex o taie și nu poate depăși limitele sale. Cu toate acestea, dacă setați lățimea prin lățime sau o lățime maximă și nu flexibilă, elementul din interiorul recipientului Flex va fi capabil să depășească acest container (uneori aveți nevoie de acest comportament). Exemplu:

Exemple de aspect Flex

În exemple, oriunde folosește prefixe pentru browser-ul încrucișat. Am făcut acest lucru pentru citirea convenabilă CSS. Prin urmare, vedeți cele mai recente exemple. versiuni ale crului sau Firefox.

# 1 exemplu simplu cu aliniere verticală și orizontală

Să începem cu cel mai simplu exemplu - de nivelare verticală și orizontală simultan și la orice înălțime a blocului, chiar cauciuc.

Sau așa, fără bloc în interior:

# 1.2 Separarea (decalajul) între elementele blocului Flex

Pentru a poziționa elementele containerului pe margini și selectați arbitrar elementul după care va exista o pauză, trebuie să utilizați proprietatea marginală-stânga: Auto sau Margin-dreapta: Auto.

Meniul adaptiv # 2 pe flex

Efectuați un meniu în partea de sus a paginii. Pe un ecran larg trebuie să aibă dreptate. În medie, aliniate la mijloc. Și pe un mic element ar trebui să fie pe o linie nouă.

# 3 adaptive 3 coloane

Acest exemplu arată cât de repede și convenabil efectuează 3 coloane, care, atunci când se îngustează, se vor transforma în 2 și apoi în 1.

Vă rugăm să rețineți că acest lucru se poate face fără a utiliza regulile media, toate pe Flex.

Du-te la jsfiddle.net și schimbați lățimea secțiunii "Rezultat"

# 4 blocuri adaptive pe flex

Să presupunem că trebuie să retragem 3 blocuri, unul mare și două mici. În același timp, este necesar ca blocurile să se fixeze în ecrane mici. Face:

Du-te la jsfiddle.net și schimbați lățimea secțiunii "Rezultat"

# 5 Galerie pe flex și tranziție

Acest exemplu arată cât de repede puteți face un acord de ochi destul de ochi cu imagini pe Flex. Acordați atenție proprietății de tranziție pentru Flex.

# 6 Flex în flex (doar un exemplu)

Sarcina face un bloc flexibil. Astfel încât începutul textului din fiecare bloc a fost pe aceeași linie orizontală. Acestea. Cu lățimea lățimii, blocurile cresc în înălțime. Este necesar ca imaginea să fie în partea de sus, butonul este întotdeauna la parter, iar textul din mijloc a început pe o linie orizontală ...

Pentru a rezolva această problemă, blocurile în sine sunt întinse prin Flex, iar lățimea maximă posibilă este instalată. Fiecare unitate internă este, de asemenea, un flex cu un design, cu o coloană Flex-Direct: și elementul din mijloc (unde se află textul) este întins Flex-crescă: 1; Pentru a umple tot spațiul liber, rezultatul este realizat - textul a început cu o singură linie ...

Mai multe exemple

Suport browser - 98,3%

Desigur, nu există nici un sprijin complet, ci totul browsere moderne Sprijiniți modelele FlexBox. Pentru unii, încă mai trebuie să specificați prefixele. Pentru o imagine reală, uitați-vă în CANIUSE.COM și vedeți că 96,3% din browser-ul utilizat astăzi vor funcționa fără prefixe, cu prefixuri de 98,3%. Acesta este un indicator excelent pentru a folosi cu îndrăzneală Flexbox.

Pentru a ști ce prefixe sunt relevante astăzi (iunie 2019), voi da un exemplu de toate regulile Flex cu prefixe necesare:

/ * Container * / -Webkit-Box-Orient: verticală; -webit-cutia-direcție: normal; -ms-flex-direcție: coloană; flex-direcție: coloană; -ms-flex-wrap: învelire; flex-wrap: wrap; -ms -Flex-flow: folie de coloană; Flex-Flow: folie coloană; -webit-ambalaj: Justify; -ms-flex-pack: justifica; justificați-conținut: spațiu-între; -ms-flex-linie-pachet: Distribuiți; Align-Content: Space-in jurul;) / * elemente * / .flex-element (-webit-box-flex: 1; -ms-flex-pozitiv: 1; flex-cresc: 1; -ms-flex- Negativ: 2; flex-contracție: 2; -ms-flex-preferat-dimensiune: 100px; flex-bază: 100px; -ms-flex: 1 2 100px; flex: 1 2 100px; -ms-flex-element-align : Centru; align-sine: centru; -Webkit-Box-Ortalinal-Grupa: 3; -m-flex-comandă: 2; ordinea: 2;)

Este mai bine dacă proprietățile cu prefixe vor merge la proprietatea originală.
Nu există astăzi inutile (de către CANSUSE) prefixe (de către CANIUSE), dar în general prefixează mai mult.

• (Nou) - noua sintaxă: Afișaj: Flex; .
• (Tweener) - Sintaxă neoficială veche 2011: Afișaj: Flexbox; .
• (Vechi) - Sintaxă veche 2009: Afișaj: cutie;

Video

Ei bine, nu uitați de videoclip, uneori este, de asemenea, interesant și de înțeles. Iată câteva populare:

Link-uri utile pentru flex

flexboxfroggy.com - Joc educațional Flexbox.

Flexplorer este un designer de coduri flexibile vizuale.