Flexbox poate fi numit pe bună dreptate o încercare reușită de a rezolva o gamă largă de probleme atunci când construiești layout-uri în css. Dar înainte de a trece la descrierea acesteia, să aflăm ce este în neregulă cu metodele de layout pe care le folosim acum?

Orice designer de layout cunoaște mai multe moduri de a alinia ceva vertical sau de a face un aspect cu 3 coloane cu un cauciuc coloana din mijloc. Dar să admitem că toate aceste metode sunt destul de ciudate, asemănătoare unui hack, nepotrivite în toate cazurile, greu de înțeles și nu funcționează dacă anumite condiții magice care s-au dezvoltat istoric nu sunt îndeplinite.

S-a întâmplat pentru că html și css au evoluat evolutiv. La începutul paginilor web erau ca single-threaded documente text, puțin mai târziu, împărțirea paginii în blocuri s-a făcut cu tabele, apoi a devenit la modă tipărirea cu float, iar după moartea oficială a ie6 s-au adăugat trucuri cu inline-block. Drept urmare, am moștenit un amestec exploziv al tuturor acestor tehnici folosite pentru a crea machete pentru 99,9% din toate paginile web existente.

Organizarea pe mai multe linii a blocurilor în interiorul unui container flexibil.

flex wrap

Toate exemplele pe care le-am dat mai sus au fost construite ținând cont de aranjarea blocurilor cu o singură linie (o singură coloană). Trebuie să spun că implicit, containerul flex va plasa întotdeauna blocurile în interiorul său într-o singură linie. Cu toate acestea, specificația acceptă și modul multilinie. Proprietatea CSS flex-wrap este responsabilă pentru mai multe linii într-un container flex.

Valori disponibile flex wrap:

• nowrap (valoare implicită): blocurile sunt aranjate pe o linie de la stânga la dreapta (în rtl de la dreapta la stânga)
• wrap: blocurile sunt dispuse pe mai multe rânduri orizontale (dacă nu se potrivesc pe un rând). Se succed de la stânga la dreapta (în rtl de la dreapta la stânga)
• wrap-reverse: la fel ca înfășura, dar blocurile sunt în ordine inversă.

flex-flow este o prescurtare utilă pentru flex-direction + flex-wrap

De fapt, flex-flow oferă capacitatea de a descrie direcția principală și multilinia a axei transversale într-o singură proprietate. În mod implicit, flex-flow: row nowrap .

flux flexibil:<‘flex-direction’> || <‘flex-wrap’>

css

/* adică ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* acesta este la fel ca... */ .my-flex-block( flex-flow: coloana wrap ;)

aliniază conținutul

Există, de asemenea, proprietatea align-content, care determină modul în care rândurile de blocuri rezultate vor fi aliniate vertical și cum vor împărți întregul spațiu al containerului flexibil.

Important: align-content funcționează numai în modul multilinie (adică în cazul flex-wrap:wrap; sau flex-wrap:wrap-reverse;)

Valori disponibile aliniază conținutul:

• flex-start: rândurile de blocuri sunt împinse la începutul containerului flexibil.
• flex-end: rândurile de blocuri sunt împinse până la capătul containerului flex
• centru: rândurile de blocuri sunt în centrul containerului flexibil
• spațiu între: primul rând de blocuri este situat la începutul containerului flexibil, ultimul rând de blocuri este un bloc la sfârșit, toate celelalte rânduri sunt distribuite uniform în spațiul rămas.
• space-around: rândurile de blocuri sunt distanțate uniform de la începutul până la sfârșitul containerului flexibil, împărțind tot spațiul liber în mod egal.
• întinde (valoare implicită): Rândurile de blocuri sunt întinse pentru a ocupa tot spațiul disponibil.

Proprietățile CSS flex-wrap și align-content trebuie aplicate direct containerului flex, nu copiilor acestuia.

Demo de proprietăți multilinie în flex

Reguli CSS pentru elementele copil ale unui container flexibil (blocuri flexibile)

flex-basis - dimensiunea de bază a unui singur bloc flexibil

Setează dimensiunea inițială a axei principale pentru o casetă flexibilă înainte ca transformările bazate pe alți factori flexibili să fie aplicate acesteia. Poate fi setat în orice unitate de lungime (px , em , % , ...) sau automat (implicit). Dacă se setează automat, dimensiunile blocului (lățime, înălțime) sunt luate ca bază, care, la rândul lor, pot depinde de dimensiunea conținutului, dacă nu sunt specificate în mod explicit.

flex-grow - „lacomia” unui singur bloc flex

Determină cât de mult poate fi mai mare o cutie flexibilă individuală decât articolele adiacente, dacă este necesar. flex-grow ia o valoare fără dimensiune (implicit 0)

Exemplul 1:

• Dacă toate cutiile flexibile din interiorul unui container flexibil au flex-grow:1 , atunci acestea vor avea aceeași dimensiune
• Dacă unul dintre ele are flex-grow:2, atunci va fi de 2 ori mai mare decât toate celelalte

Exemplul 2:

• 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

Adică, valoarea absolută a flex-grow nu determină lățimea exactă. Își determină gradul de „lacomie” în raport cu alte blocuri flexibile de același nivel.

flex-shrink - factorul de „compresibilitate” al unui singur bloc flexibil

Determină cât de mult se va micșora cutia flexibilă în raport cu articolele adiacente din interiorul containerului flexibil dacă nu există suficient spațiu liber. Valoarea implicită este 1.

flex - prescurtare pentru proprietățile flex-grow, flex-shrink și flex-base

flex: niciunul | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

css

/* adică ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex basis: 30em; ) /* aceasta este la fel ca... */ .my-flex-block( flex : 12 3 30em; )

Demo pentru flex-grow, flex-shrink și flex-base

align-self - alinierea unui singur flex-bloc de-a lungul axei transversale.

Face posibilă suprascrierea proprietății de aliniere a articolelor a unui container flexibil pentru o cutie flexibilă individuală.

Valori align-self disponibile (aceleași 5 opțiuni ca pentru align-items)

• flex-start: cutia flexibilă este împinsă la începutul axei transversale
• flex-end: cutia flexibilă este împinsă până la capătul axei transversale
• centru: cutia flexibilă este plasată în centrul axei transversale
• linie de bază: caseta flexibilă aliniată la linia de bază
• întinde (valoare implicită): Cutia flexibilă este întinsă pentru a ocupa tot spațiul disponibil pe axa transversală, luând în considerare lățimea minimă / lățimea maximă, dacă există.

ordine - ordinea unui singur bloc flexibil în interiorul containerului flexibil.

În mod implicit, toate blocurile se vor urma în ordinea dată în html. Cu toate acestea, această ordine poate fi modificată folosind proprietatea comenzii. Este specificat ca un întreg și implicit este 0 .

Valoarea ordinului nu specifică poziția absolută a elementului în secvență. Determină greutatea poziției elementului.

HTML

În acest caz, blocurile vor urma unul pe altul de-a lungul axei principale în următoarea ordine: item5, item1, item3, item4, item2

Demo pentru align-self și ordine

margine: auto vertical. Visele devin realitate!

Flexbox poate fi iubit cel puțin pentru faptul că alinierea orizontală este familiară tuturor prin margine: auto funcționează aici și pentru verticală!

My-flex-container ( afișare: flex; înălțime: 300 px; /* Sau orice */ ) .my-flex-block ( lățime: 100 px; /* Sau orice */ înălțime: 100 px; /* Sau orice * / margine: automat; /* Magic! Caseta este centrată vertical și orizontal! */ )

Lucruri de amintit

1. Nu ar trebui să utilizați flexbox acolo unde nu aveți nevoie.
2. Este totuși util ca definirea regiunilor și reordonarea conținutului să depindă de structura paginii în multe cazuri. Gândește-te bine.
3. Înțelegeți flexbox și cunoașteți elementele de bază. Acest lucru face mult mai ușor să obțineți rezultatul așteptat.
4. Nu uitați de marje. Ele sunt luate în considerare la setarea alinierii axei. De asemenea, este important să ne amintim că marjele flexbox nu „se prăbușesc” așa cum se întâmplă în fluxul normal.
5. Valoarea float a blocurilor flexibile nu este luată în considerare și nu contează. Acest lucru, probabil, poate fi folosit cumva pentru o degradare grațioasă atunci când treceți la flexbox.
6. flexbox este foarte potrivit pentru amenajarea componentelor web și a părților individuale ale paginilor web, dar nu a funcționat bine la aranjarea machetelor de bază (poziția articolului, antet, subsol, bară de navigare etc.). Este încă un subiect discutabil, dar acest articol arată deficiențele destul de convingător xanthir.com/blog/b4580

In cele din urma

Cred că flexbox, desigur, nu va înlocui toate celelalte metode de layout, dar, desigur, va ocupa o nișă demnă în viitorul apropiat atunci când rezolvă un număr mare de sarcini. Și cu siguranță, trebuie să încerci să lucrezi cu el acum. Unul dintre următoarele articole va fi dedicat exemplelor specifice de lucru cu flex-layout. Aboneaza-te la noutati ;)

Aș dori să vorbesc despre FlexBox. Modul de aspect Flexbox (cutie flexibilă - „bloc flexibil”, activat acest moment Recomandarea candidaților W3C) își propune să ofere mai mult metoda eficienta aspectul, alinierea și distribuția spațiului liber între elementele dintr-un container, chiar și atunci când dimensiunea acestora este necunoscută și/sau dinamică (de unde și cuvântul „flexibil”).

Ideea principală a aspectului flexibil este de a oferi containerului capacitatea de a modifica lățimea / înălțimea (și ordinea) elementelor sale pentru a umplere mai bună spațiu (în majoritatea cazurilor, pentru a accepta toate tipurile de afișaje și dimensiuni de ecran).Un container flexibil întinde articolele pentru a umple spațiul sau le comprimă pentru a preveni debordarea.

Cel mai important, aspectul flexbox este independent de direcție, spre deosebire de aspectele normale (cutiile sunt stivuite vertical, iar elementele inline sunt stivuite orizontal).În timp ce aspectul obișnuit este excelent pentru paginile web, îi lipsește flexibilitatea de a accepta aplicații mari sau complexe (mai ales când vine vorba de schimbarea orientării ecranului, redimensionarea, întinderea, strângerea etc.).

pentru că flexbox este un modul întreg, nu doar o singură proprietate, ci combină multe proprietăți.Unele dintre ele trebuie aplicate containerului (ale elementului părinte, alias containerul flexibil), în timp ce alte proprietăți se aplică elementelor secundare sau elementelor flexibile.

În timp ce aspectul normal se bazează pe direcțiile de curgere ale elementelor bloc și inline, aspectul flexibil se bazează pe „direcțiile fluxului flexibil”.

Flexbox

Practic, articolele vor fi distribuite fie de-a lungul axei principale (de la începutul principal la capătul principal), fie de-a lungul axei transversale (de la începutul încrucișat la capătul transversal).

main-axis - axa principală de-a lungul căreia sunt amplasate elementele flexibile.Vă rugăm să rețineți că trebuie să fie orizontal, totul depinde de calitatea conținutului justificat.
main-start | capătul principal - articolele flexibile sunt plasate în container din poziția de pornire principală până la poziția de sfârșit principal.
dimensiunea principală - lățimea sau înălțimea elementului flexibil, în funcție de dimensiunea principală selectată.Valoarea de bază poate fi fie lățimea, fie înălțimea elementului.
axa transversală — axă transversală perpendiculară pe cea principală.Direcția sa depinde de direcția axei principale.
început încrucișat | cross-end - liniile flexibile sunt umplute cu articole și plasate în container din poziția de pornire încrucișată și poziția de capăt încrucișat.
dimensiunea crucii - lățimea sau înălțimea elementului flexibil, în funcție de dimensiunea selectată, este egală cu această valoare.Această proprietate este aceeași cu lățimea sau înălțimea elementului, în funcție de dimensiunea selectată.

Proprietăți
afișaj: flex | inline-flex;

Definește un container flexibil (fie inline sau bloc în funcție de valoarea selectată), include un context flexibil pentru toți copiii săi imediati.

afișare: alte valori | flex | inline-flex;

Ține minte:

Coloanele CSS nu funcționează cu containerul flexibilfloat, clear și vertical-align nu funcționează pe articolele flexibile

direcția de flex

Se aplică înaintea elementului părinte al containerului flexibil.

Setează axa principală, definind astfel direcția pentru articolele flexibile plasate în container.

flex-direcție: rând | rând-invers | coloana | coloană inversă

rând (implicit): de la stânga la dreapta pentru ltr, de la dreapta la stânga pentru rtl;
rând-invers: de la dreapta la stânga pentru ltr, de la stânga la dreapta pentru rtl;
coloană: asemănătoare rândului, de sus în jos;
coloană-invers: similar cu rândul-invers, de jos în sus.

flex wrap

Se aplică înaintea elementului părinte al containerului flexibil.

Stabilește dacă containerul este cu o singură linie sau cu mai multe linii, precum și direcția axei transversale, determină direcția în care vor fi amplasate noile linii.

flex-wrap: nowrap | înfășurare | înfășurați invers

nowrap (implicit): o singură linie / de la stânga la dreapta pentru ltr, de la dreapta la stânga pentru rtl;
wrap: multiline / de la stânga la dreapta pentru ltr, de la dreapta la stânga pentru rtl;
wrap-reverse: multilinie / de la dreapta la stânga pentru ltr, de la stânga la dreapta pentru rtl.

curgere flexibilă

Se aplică înaintea elementului părinte al containerului flexibil.

Aceasta este prescurtarea pentru proprietățile de direcție flex și flex-wrap, care împreună definesc axele principale și transversale.Setarea implicită a rândului nowrap.

curgere flexibilă< ‘flex-direction’> || < ‘Flex-wrap’>

justificare-conținut

Se aplică înaintea elementului părinte al containerului flexibil.

Specifică alinierea relativ la axa principală.Ajută la alocarea spațiului liber în cazul în care elementele liniei nu sunt „întinse” sau târâte, dar au atins deja dimensiunea maximă.De asemenea, vă permite să controlați oarecum alinierea elementelor atunci când treceți dincolo de linie.

justify-content: flex-start | capăt flexibil | centru | spatiu intre | spatiu in jur

flex-start (implicit): elementele sunt mutate la începutul liniei;
flex-end: elementele sunt deplasate la capătul liniei;
centru: elementele sunt aliniate la mijlocul liniei;
spațiu între: elementele sunt distanțate uniform (primul element la începutul liniei, ultimul element la sfârșit)
spațiu în jurul: elementele sunt distanțate uniform, cu o distanță egală între ele și în afara rândului.

justificare-conținut
alinierea elementelor

Se aplică înaintea elementului părinte al containerului flexibil.

Specifică comportamentul implicit pentru modul în care elementele flexibile sunt poziționate în raport cu axa transversală pe linia curentă.Gândiți-vă la ea ca la o versiune a justify-conținut pentru axa transversală (perpendiculară pe cea principală).

alinierea elementelor: flex-start | capăt flexibil | centru | linie de bază | întinde

flex-start: chenarul de pornire transversală pentru elementele situate la poziția de pornire transversală;
flex-end: bordura transversală pentru elementele situate la poziția transversală;
centru: elementele sunt aliniate la centrul axei transversale;
linia de bază: elementele sunt aliniate pe linia lor de bază;
stretch (implicit): elementele sunt întinse pentru a umple containerul (supus lățimii minime / lățimii maxime).

alinierea elementelor
aliniază conținutul

Se aplică înaintea elementului părinte al containerului flexibil. Aliniază liniile containerului flexibil atunci când există spațiu liber pe axa transversală, similar cu modul justify-content pe axa principală. Notă: această proprietate nu funcționează cu casetele flexibile cu o singură linie.

align-content: flex-start | capăt flexibil | centru | spatiu intre | spatiu in jurul | întinde

flex-start: liniile sunt aliniate față de începutul containerului;
flex-end: liniile sunt aliniate față de capătul containerului;
centru: rândurile sunt aliniate la centrul containerului;
spatiu intre: liniile sunt distantate uniform (prima linie la inceputul liniei, ultima linie la sfarsit)
spațiu-în jur: liniile sunt distribuite uniform, cu distanță egală între ele;
întindere (implicit): liniile sunt întinse pentru a umple spațiul liber.

aliniază conținutul
Ordin

În mod implicit, articolele flexibile sunt așezate în ordinea inițială.Cu toate acestea, proprietatea order poate controla ordinea în care apar în container.

comanda 1

flex-creștere

Se aplica inaintea elementului copil/flex. Specifică capacitatea unui element flexibil de a „crește” după cum este necesar.Ia o valoare adimensională, servește ca proporție.Determină cât spațiu liber poate ocupa elementul în interiorul containerului. Dacă toate elementele au proprietatea flex-grow setată la 1, atunci fiecare copil va primi aceeași dimensiune în interiorul containerului.Dacă setați unul dintre copii la 2, atunci va ocupa de două ori mai mult spațiu decât ceilalți.

flex-creștere (implicit 0)

flex-contractie

Se aplica inaintea elementului copil/flex.

Stabilește dacă un element flexibil se poate micșora atunci când este necesar.

flex-contractie (implicit 1)

Numerele negative nu sunt acceptate.
baza flexibila

Se aplica inaintea elementului copil/flex. Specifică dimensiunea implicită pentru un element înainte de a aloca spațiu în container.

baza flexibila | automat (auto implicit)

contracta

Se aplica inaintea elementului copil/flex. Aceasta este prescurtarea pentru flex-grow, flex-shrink și flex-base.Al doilea și al treilea parametri (flex-shrink, flex-basis) sunt opționali.Valoarea implicită este 0 1 auto.

flex: niciunul | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

alinierea-sine

Se aplica inaintea elementului copil/flex. Vă permite să înlocuiți alinierea implicită sau alinierea elementelor pentru elementele flexibile individuale. Consultați descrierea proprietății align-items pentru o mai bună înțelegere a valorilor disponibile.

align-self: auto | flex start | capăt flexibil | centru | linie de bază | întinde

Exemple
Să începem cu foarte foarte un exemplu simplu, are loc aproape zilnic: alinierea exact în centru.Nimic nu este mai ușor folosind flexbox.

Părinte ( afișare: flex; înălțime: 300 px; ) .copil ( lățime: 100 px; / * Așa este * / înălțime: 100 px; / * Așa e corect * / margine: auto; / * Magie! * / )

Acest exemplu se bazează pe faptul că marginea de sub containerul flexibil, setată la auto, absoarbe spațiul suplimentar, astfel încât sarcina de indentare în acest fel va alinia elementul exact în centru pe ambele axe. Acum să folosim câteva proprietăți.Imaginează-ți un set de 6 elemente marime fixa(pentru frumusețe), dar cu capacitatea de a redimensiona recipientul.Vrem să le distribuim uniform pe orizontală, astfel încât atunci când fereastra browserului este redimensionată, totul să arate bine (fără interogări @media!).

container flexibil (
/* Creați mai întâi un context flexibil */
display:flex;

/* Acum să determinăm direcția fluxului și dacă vrem elementele
transferat la linie nouă
* Amintiți-vă că acesta este același cu:
* Flex-direcție: rând;
* Flex-wrap: wrap;
* /
flex-flow: înfășurare rând;

/* Acum să definim cum va fi distribuit spațiul */
}

Gata. Orice altceva este o chestiune de design. Să încercăm altceva.Imaginați-vă că vrem o navigare aliniată la dreapta în partea de sus a site-ului nostru, dar vrem să fie aliniată în centru pe ecranele de dimensiuni medii și să devină o singură coloană pe cele mici.Totul este destul de simplu.

/ * Ecrane mari * /
.navigare(
display:flex;
flex-flow: înfășurare rând;
/* Mută ​​elementele la capătul liniei de-a lungul axei principale */
justificare-conținut: flex-end;
}

media toate și (lățimea maximă: 800px) (
.navigare(
/* Pentru ecrane de dimensiuni medii, centrem navigarea,
distribuirea uniformă a spațiului liber între elemente */
justificare-conținut: spațiu în jur;
}
}

/* Ecrane mici */
media toate și (lățimea maximă: 500px) (
.navigare(
/* Pe ecrane mici, în loc de rând, aranjam elementele într-o coloană */
flex-direcție: coloană;
}
}

Să ne jucăm cu flexibilitatea articolelor flexibile!Ce zici de un aspect în trei coloane pentru dispozitive mobile, cu un antet și un subsol la lățime completă?Și într-o altă ordine.

ambalaj (
display:flex;
flex-flow: înfășurare rând;
}

/* Setați toate elementele la 100% lățime */
.header, .principal, .nav, .aside, .footer (
flex 1100%;
}

/* În acest caz, ne bazăm pe comanda inițială pentru a viza
* Dispozitive mobile:
* 1 antet
*2nav
* 3 principale
* 4 deoparte
* 5 picioare
* /

/* Ecrane de dimensiuni medii */
media toate și (lățime minimă: 600px) (
/* Ambele bare laterale sunt pe aceeași linie */
.aside (flex: 1 auto; )
}

/* Ecrane mari */

Folosind un exemplu de formular dintr-o sarcină de testare reală, vă voi arăta cum să tipați conform BEM folosind flexbox. Vă întrebați: „De ce este necesar să tipăriți în funcție de BEM + Flexbox?" Această cerință vine de la angajator. Citat din TOR: "Încercați să tipați fără cadre (de preferință pe flexbox), simplu și clar: evitați construcțiile greoaie și codul suplimentar, utilizați metodologia BEM."

Fragment de aspect al secțiunii cu un formular

Regulile mele de aranjare

1. Împărțiți aspectul în secțiuni logice
2. Începeți fiecare secțiune cu o etichetă secțiune
3. secţiuni separate şi css stăpânit deoparte, sfoară goală
4. Atribuiți o clasă fiecărei etichete
5. Numele clasei pentru bloc sau element, răspunde la întrebarea - Ce este?
6. Numele modificatorului răspunde la întrebarea - Care?

Marcaj HTML

În primul rând, fac marcajul, determin imbricarea blocurilor și vin cu nume pentru clase. În codul de mai jos, avem două etichete inline - h2Și intrare. Etichetele inline sunt o durere de cap și o sursă de stres pentru designerii de layout începători. De ce? Se comportă foarte rău - încearcă să ocupe toată lățimea disponibilă, nu vă permit să setați culoarea de fundal și dimensiunea întregului bloc.

Informații personale

Ce face un programator prost în acest caz? Învelește elementele inline în etichete de bloc divși setează toate proprietățile necesare etichetei wrapper. Elementele inline copil moștenesc aceste proprietăți. Merită să îngrădiți o grădină din exces de cod? Cum va acționa un designer de layout competent? Acesta va redefini un element inline pentru a bloca sau inline-block, în css reguli.

display:bloc; // pentru eticheta de intrare
display: inline-block // pentru eticheta h2

Logica de imbricare și nume de bloc

Vedem o secțiune cu informații personale, așa că numim clasa de secțiune - info. Secțiunea constă din trei elemente copil:

Pictogramă // numele clasei info__icon
titlu // info__title
formular // info_form

Esența numelui clasei BEM, consta in faptul ca elementul copil apartine parintelui. Nu se poate denumi elementul pictograma. Aceasta nu este doar o pictogramă, ci o pictogramă din secțiune info.

Fiică și părinte într-o singură persoană

bloc info_form, avem unul special - este imbricat în secțiune info, dar în același timp, conține câmpuri de formular. Numele acestui fenomen este cuibărire pe mai multe niveluri. Blocul cu formular are o funcție pur de înveliș pentru intrări, astfel încât să puteți seta cu ușurință marginile. La urma urmei, intrările cu litere mici se comportă ca copii (ceea ce sunt), nu se supun deloc. Mai mult, a doua intrare este mai scurtă decât toate celelalte și diferă doar prin lățime.

Setăm o clasă pentru toate intrările cu aceleași proprietăți, cu excepția lățimii - info_input. Intrări obișnuite, adăugați un modificator info_input_long, și introducere scurtă - modificator info_input_short. Permiteți-mi să vă reamintesc că modificatorul BEM ar trebui să răspundă la întrebare - Care?

Reguli CSS pentru modificatori

.info__input_long(
lățime: 520px
}

info__input_short(
lățime: 320px
}

Cod CSS

ÎN HTML marcajul creează o structură brută a site-ului, în css, amplasăm deja elementele conform aspectului. În seara asta, nu ne vom atinge aspect, și concentrați-vă pe poziționarea elementelor. În secțiunea noastră, există două containere flexibile. Trebuie să spun că folosirea flexurilor, cu aranjarea tuturor elementelor câte unul pe linie, este foarte îndoielnică. Singurul beneficiu pe care îl obțineți este proprietatea justificare-conținut, aliniere la centru, articole flexibile. Pot spune în apărarea mea că ideea cu flexuri este lipsită de sens, doar în contextul acestei secțiuni. Un aspect real pentru aspect are de obicei mai multă varietate.

info(
display:flex;
justificare-conținut: centru;
alinierea elementelor: centru;
flex-direcție: coloană;
margine-sus: 77px;
inaltime: 100%;
}

info_form(
display:flex;
justificare-conținut: centru;
flex-direcție: coloană;
inaltime: 100%;
margine-sus: 50px;

Nimic nu stă pe loc, tehnologiile și standardele 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 de marcare Emmet la îndemână încorporat implicit sau disponibil pentru descărcare, care vă permite să faceți marcajul de bază al acestui exemplu, după cum urmează: sectiune>div*3>lorem+ Tab (valoare lorem generează textul prezentat în imaginea de mai jos).

Rețineți că, cu puțin efort, am făcut ca coloanele noastre de aspect să aibă aceeași înălțime, indiferent de modul în care au fost umplute cu conținut, ceea ce este grozav. Elemente

nu sunt elemente flexibile în mod implicit și sunt situate în flux al treilea element