Accentsconagua
Iată primul element
Iată următorul element
Al treilea element
Al patrulea element
Share
Dacă ați început să scrieți CSS acum câțiva ani, șansele sunt că ați devenit obișnuiți cu câteva ciudățenii de layout-uri CSS pe care le-ați luat pentru a fi inevitabile. De exemplu, folosind elemente poziționate absolut în interiorul elementelor relativ poziționate sau utilizând clearfix în combinație cu flotoare pentru a realiza grile de coloane.
Intuitiv, toți am crezut că ar trebui să existe o cale mai bună. La urma urmei, este cam ciudat faptul că cea mai bună soluție pentru centrarea verticală a implicat utilizarea afișare: tabel; și stilurile asociate. De ce ar trebui să folosim hacks pentru a face lucrurile fundamentale să funcționeze?
cutie flexibilă modul, sau flexbox pe scurt, este soluția emergentă pentru multe dintre problemele noastre anterioare și se potrivește cu o serie de modele de design care au devenit predominante. Ideea de bază din spatele flexbox-ului este de a permite ca caseta de elemente conținând elemente să se redimensioneze și să se rearanjeze acele elemente pentru a se potrivi cel mai bine containerului într-un mod adecvat.
Flexbox nu este destinat utilizării la nivel de site în mod necesar. Spectrul de grilă CSS se ocupă de rezolvarea acestei probleme, dar, din păcate, este încă într-o stare mult mai puțin susținută decât flexbox, care are cel puțin un sprijin parțial în toate browserele, cu excepția lui Opera Mini. Spre deosebire de aceasta, spec. Grid CSS este doar pe deplin suportată de IE, cu suport necunoscut sau fără suport în toate celelalte browsere.
Flexbox este destinat a fi utilizat pentru porțiuni discrete ale unui aspect. În acest articol, vom acoperi câteva sarcini comune care pot fi îndeplinite mai eficient cu flexbox și explicând sintaxa pentru modul în care obținem rezultate deosebite. Pentru a obține o imagine de ansamblu completă a tuturor opțiunilor de proprietăți, aruncați o privire la postul CSS Tricks pe flex box. Ghid pentru Flexbox.
Înainte de flexbox, centrarea verticală a conținutului dinamic a reprezentat o sarcină non-trivială. (Vezi acest post Smashing Mag, precum și acest articol CSS-Tricks pentru povestea completă.) Cu flexbox, totul a devenit mai ușor. Vom configura un container de bază cu elemente copil.
Testarea centrului verticalUn test secundarTerțiar este de trei
Scopul nostru este de a centra aceste elemente în plan vertical și orizontal. Cu flexbox, este la fel de simplu ca următoarele:
.container lățime: 500px; înălțime: 500px; marja: 0 auto; fundal-culoare: #dedede; / * Reguli Flex * / display: flex; flex-flow: coloană acum; justify-content: centru; aliniere: centru;
Notă: că nu folosim versiunile prefixate ale vânzătorului, dar ar trebui! Alternativ, aruncați o privire la Autoprefixer.
Veți observa câteva reguli noi nefamiliare aplicate aici; Flexbox este un modul care cuprinde o serie de proprietăți. Pentru a începe, afișare: flex creează containerul flexbox și elementele copilului sunt tratate automat ca elemente flexibile.
Cu excepția cazului în care stipulăm altfel, elementele flexibile vor curge pe linie de-a lungul axei principale. in orice caz, -Flow flex (care este prescurtarea pentru flex-direcție și flex-wrap proprietăți) poate modifica atât axele principale, cât și axele încrucișate. flex-flow: coloană acum spune flexbox că dorim ca conținutul nostru să fie afișat într-o coloană verticală și că nu dorim ca obiectele noastre să se înfășoare (forțându-le să sară la următorul rând).
justifică conținut la centru, care aliniază elementele noastre la centrul axei principale, care se bazează pe direcția definită de -Flow flex, în acest caz axa verticală. align-items: center aliniază elementele noastre în raport cu axa secundară ("cruce").
Există o problemă inerentă cu o abordare tradițională a aspectului, în special atunci când este vorba de un conținut receptiv. Când utilizați flotoare, de exemplu, este ușor să vedeți conținutul unei pagini într-o ordine total diferită de cea naturală sau cognitivă. În plus, este foarte dificil să manipulezi ordinea elementelor de pe o pagină. Cu flexbox, vom aborda una dintre cele mai greu de realizat planuri pentru CSS tradiționale; o stivuire de elemente în ordine inversă, în ordine inversă. Deci, cu alte cuvinte, elementul care apare primul în marcaj va apărea ultimul pe ecran și adăugând elemente noi în partea de jos a marcajului, le va apărea în partea de sus a ecranului.
Vom folosi acest marcaj:
Cu următorul CSS, putem realiza ceea ce încercăm să facem cu ușurință.
principala poziție: relativă; înălțime: 100%; afișaj: flex; flex-flow: coloană inversă; justify-content: flex-end; aliniere: centru;
Acest lucru ne va oferi exact ceea ce urmărim. Vizualizați rezultatele (cu câteva stiluri suplimentare pentru o vizualizare mai ușoară) aici.
Creând o coloană inversă pe -Flow flex, cerem flexbox să inverseze ordinea articolelor. Vrem să aliniem conținutul la sfârșitul liniei încrucișate flexbox, care în cazul coloanei inversate este o linie verticală care rulează din partea de jos a casetei în sus.
Am stabilit și noi aliniați-elemente: centru pentru a centra elementele din coloană orizontal. Acest lucru este util pentru orice tip de stivuire a elementelor, unde ordinea cognitivă (prima până la ultima) nu se potrivește cu ordinea vizuală (de sus în jos).
Există o mulțime de situații în care trebuie să reordonați elemente în funcție de dimensiunea ecranului. Soluțiile comune pentru această problemă sunt, de obicei, complicate sau repetă marcarea. Uitați-vă la acest exemplu, în cazul în care am mutat o imagine featured de a fi în fluxul unui articol la începutul articolului utilizând simpla Ordin proprietate. Utilizăm următorul cod HTML:
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Ipsam repudiandae ulm ipsum repellendus officiis eique unde auto porro acusamus placeat earum qui quia quidem totam harum odit voluptates?
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Spălătorie proprie voluptas commodi atque. Consecință non natus earum nobis exercițiu sapiente dolorem explicabo asperiores soluta unde est voluptatibus fugit officia quo.
Și CSS însoțitor:
principalele display: flex; flex-flow: înfășurarea rândului; img flex-creștere: 1; lățime: 200px; ordine: 3; p flex: 1 auto; ordine: 1; padding: 10px; fundal-culoare: #dedede; marja: 0; p: n-copil (3) ordine: 2; flex: 3 0 50px; Numai ecranul @media și (max-width: 600px) img ordine: 1; p flex: 1 auto; ordine: 2; padding: 10px; fundal-culoare: #dedede; marja: 0; p: n-copil (3) ordine: 3; flex: 3 0 50px;
Acesta este doar vârful iceberg-ului când vine vorba de puterea oferită de flexbox pentru a face într-o foarte puține linii de cod ceea ce este de obicei mult mai dificil de realizat.
De cate ori ati fost frustrati ca a fost imposibil sa faceti 100/3, si apoi recurgeti la crearea de coloane de latime de 99,9%, doar pentru a realiza cat de slaba este o solutie? Flexbox remediază această problemă o dată pentru totdeauna. Luați marcajul:
TestareaTestareaTestarea
Și adăugați CSS pentru a afișa toate cele trei coloane, calculate perfect.
.container display: flex; justify-content: centru; aliniere-conținut: spațiu între; fundal-culoare: #dadada; coloană lățime: 100%; padding: 50px; text-align: centru; box-shadow: 0 0 10px # c0c0c0;
Vrei un jgheab puțin? Nici o problema. Pur și simplu adăugați marjă la dvs. .coloană clasă. Calculele pentru spațierea corespunzătoare se fac pentru dvs..
Aruncați o privire la minunatul replică GitHub "Solved By Flexbox" pentru mai multe exemple. Flexbox este un modul puternic puternic, așa cum sperăm că a fost dovedit prin acest articol. Ce sunt alte cazuri de utilizare puternică și interesantă pentru flexbox? Spuneți-ne în comentariile!
