Cum de a construi un layout de site-uri de știri cu Flexbox

Nu este necesar să înțelegi fiecare aspect al Flexbox înainte de a putea să sară și să începeți. În acest tutorial, vom introduce câteva caracteristici ale Flexbox în timp ce proiectăm un "layout de știri" cum ar fi cel pe care îl puteți găsi pe The Guardian.

Motivul pentru care folosim Flexbox este că oferă funcții foarte puternice:

• putem face cu ușurință coloane receptive
• putem face coloane de înălțime egală
• putem imprima conținut la fund a unui container

Deci sa începem!

1. Începeți cu două coloane

Crearea coloanelor în CSS a fost întotdeauna o provocare. Pentru o lungă perioadă de timp, singurele opțiuni erau să utilizeze flotoare sau mese, dar ambele aveau propriile probleme.

Flexbox facilitează procesul, oferindu-ne:

• codul de curățare: avem nevoie doar de un recipient cu afișare: flex
• nu e nevoie sa clar plutește, împiedicând comportamentul neașteptat al aspectului
• semantic markup
• flexibilitate: putem redimensiona, întinde, alinia coloanele în câteva linii de CSS

Să începem prin a face două coloane; una care este de 2/3 din lățimea containerului nostru și una care este de 1/3.

 
 Coloana 2/3 
 
 1/3 coloană 
 

Există două elemente aici:

1. coloane recipient
2. Două coloană copiii, unul cu o clasă suplimentară de principal coloană pe care o vom folosi pentru ao face mai largă

.coloane display: flex;  coloană flex: 1;  .mai-coloană flex: 2; 

Cum coloana principală are o valoare flexibilă de 2, aceasta va dura de două ori mai mult spațiu ca și cealaltă coloană.

Prin adăugarea unor stiluri vizuale suplimentare, iată ce obținem:

2. Faceți Fiecare Coloană un Container Flexbox

Fiecare dintre aceste două coloane va conține mai multe articole stivuite vertical, așa că vom schimba coloană elemente în recipiente Flexbox. Noi vrem:

• articolele care trebuie stivuite vertical
• articolele la întinde și umpleți spațiul disponibil

.coloana display: flex; direcție flexibilă: coloană; / * Face articole stivuite vertical * / .article flex: 1; / * Întinde articolele pentru a umple spațiul rămas * /

direcția flex: coloană regula cu privire la recipient, combinate cu flex: 1 regula cu privire la copii se asigură că articolele vor umple întregul spațiu vertical, menținând primele două coloane la aceeași înălțime.

3. Faceți fiecare articol un container Flexbox

Acum, pentru a ne da mai mult control, să transformăm fiecare articol într-un container Flexbox. Fiecare dintre ele va conține:

• un titlu
• un paragraf
• un bar de informare cu autorul și numărul de comentarii
• o imagine opțională receptivă

Folosim Flexbox aici pentru a "împinge" bara de informații în partea de jos. Vă reamintim că acesta este aspectul pentru care vrem să urmărim:

Iată codul:

.articol display: flex; direcție flexibilă: coloană; flex-bază: auto; / * stabilește mărimea elementului inițial pe baza conținutului său * /. body-body display: flex; flex: 1; direcție flexibilă: coloană;  .article-content flex: 1; / * Acest lucru va face ca conținutul să umple spațiul rămas și, astfel, să împingă bara de informații în partea de jos * /

Elementele articolului sunt prezentate pe verticală datorită direcție flexibilă: coloană; regulă.

Aplicăm flex: 1 la Articolul conținut astfel încât să umple spațiul gol și "împinge" articol-info spre partea de jos, indiferent de înălțimea coloanelor.

Întrucât vrem ca prima coloană imbricată să fie mai amplă, adăugăm o nested-coloană clasa cu stilul suplimentar:

.imbrăcat-coloană flex: 2; 

Acest lucru va face noua noastră coloană de două ori mai largă decât cealaltă.

.primul articol flex-direction: row; . primul articol. articol-corp flex: 1;  .primul-articol .article-image height: 300px; ordine: 2; padding-top: 0; lățime: 400px; 

Ecranul @media și (min-width: 800px) coloane, coloană display: flex; 

Ecranul @media și (min-width: 1000px) . primul articol flex-direction: row; . primul articol. articol-corp flex: 1;  .primul-articol .article-image height: 300px; ordine: 2; padding-top: 0; lățime: 400px;  .mai-coloană flex: 3; . coloană nestedă flex: 2;