Cum să utilizați Flex pentru a vă face site-ul mai receptiv

Design-urile moderne ale site-urilor web trebuie să răspundă la schimbările de conținut sau de dimensiunea browserului. Puteți realiza acest lucru folosind CSS vanilla, interogări media sau flexbox.

Anumite proprietăți flexibile, cum ar fi flex-wrap sau flex-grow, pot schimba dimensiunea sau locația unui element într-un mod atrăgător din punct de vedere vizual. Acest articol va prezenta exemple despre cum puteți utiliza proprietățile flex-grow, flex-shrink, flex-wrap, flex-flow și comandă flex.

Cum se configurează CSS Flex Display

Dacă nu ești familiarizat cu elementele de bază ale flexbox, poți explora asta Fragment CodePen. Include un exemplu de cod pentru o configurare simplă flexbox. În primul rând, va trebui să înfășurați articolele copil sub un div părinte sau „container flexibil”.

<div class="mamă">
<div class="element-copil"></div>
<div class="element-copil"></div>
<div class="element-copil"></div>
</div>

Adaugă display: flex proprietatea părintelui div.

.mamă {
 display: flex;
}

Cum să crești articole într-un container

The flex-creștere proprietatea permite elementelor secundare să se extindă pentru a umple spațiul disponibil în div-ul părinte. Această proprietate vă permite să specificați cantitatea de spațiu pe care o poate ocupa fiecare element din casetă.

Pentru a adăuga flex-grow, adăugați proprietatea CSS flex-grow la fiecare dintre elementele secundare.

<div class="mamă">
<stil div="culoare de fundal: roșu; creștere flexibilă: 1"></div>
<stil div="culoare de fundal: portocaliu; creștere flexibilă: 1"></div>
<stil div="culoare de fundal: galben; creștere flexibilă: 1"></div>
<stil div="culoare de fundal: verde; creștere flexibilă: 3"></div>
<stil div="culoare de fundal: albastru; creștere flexibilă: 1"></div>
</div>

.mamă {
 latime: 500px;
 display: flex; 
}

O creștere flexibilă de 0 pentru fiecare articol înseamnă că casetele nu se vor extinde pentru a umple spațiul părintelui lor. 0 este valoarea implicită pentru această proprietate.

O creștere flexibilă de 1 pentru fiecare articol va forța toate casetele să se extindă în mod egal pentru a se potrivi cu spațiul disponibil din interiorul părinte.

Dacă unul dintre articole a avut o creștere a flexibilității mai mare, de exemplu:

<stil div="culoare de fundal: verde; creștere flexibilă: 3"></div>

Caseta verde va încerca să câștige de până la trei ori mai mult spațiu decât celelalte casete.

Vedeți codul pentru proprietatea flex-grow în acest articol Fragment CodePen pentru a vedea un exemplu de lucru.

Cum să micșorați articolele dintr-un container

În unele cazuri, lățimea părintelui se poate micșora și articolele din interiorul părintelui nu vor mai încadra în interior. Puteți folosi flex-contractie proprietatea de a micșora dimensiunea cutiilor. În acest fel, ei pot rămâne în interiorul părintelui.

Flex-shrink vă permite să specificați un raport pentru cât de mult ar trebui să se micșoreze fiecare articol.

Adăugați proprietatea flex-shrink la elementele div secundare. Schimbați lățimile părintelui și ale copiilor, astfel încât articolele să nu încapă în recipient.

<div class="mamă">
<stil div="culoare de fundal: roșu; contracție flexibilă: 1"></div>
<stil div="culoare de fundal: portocaliu; contracție flexibilă: 1"></div>
<stil div="culoare de fundal: galben; contracție flexibilă: 1"></div>
<stil div="culoare de fundal: verde; contracție flexibilă: 2"></div>
<stil div="culoare de fundal: albastru; contracție flexibilă: 1"></div>
</div>

.mamă {
 latime: 500px;
 display: flex; 
}
.mamă div {
 latime: 150px;
 înălțime: 150px;
}

O micșorare flexibilă de 1 pentru toate articolele înseamnă că toate articolele se vor micșora în mod egal dacă lățimea părintelui este redusă.

Dacă unul dintre articole a avut o contracție flexibilă mai mare, de exemplu:

<stil div="culoare de fundal: verde; contracție flexibilă: 2"></div>

Cutia verde va încerca să se micșoreze de două ori mai mult decât celelalte cutii.

Vedeți codul pentru proprietatea flex-shrink în aceasta Fragment CodePen pentru a vedea un exemplu de lucru.

Cum să împingeți elementele pe rândul următor

The flex-wrap proprietatea vă permite să împingeți articole pe linia următoare dacă nu se încadrează în lățimea containerului părinte. Aici, articolele nu se micșorează și veți putea păstra înălțimea și lățimea articolelor.

Opțiunile pentru proprietatea flex-wrap includ:

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

Adăugați proprietatea flex-wrap la containerul flex părinte. Asigurați-vă că lățimea recipientului este suficient de mică, astfel încât să nu încapă articolele pentru copii în interiorul acestuia. Acest lucru va forța orice elemente care se debordează pe un rând nou.

<div class="mamă">
<div class="roșu"></div>
<div class="portocale"></div>
<div class="galben"></div>
<div class="verde"></div>
<div class="albastru"></div>
</div>

.mamă {
 latime: 300px;
 chenar: 1px negru solid;
 display: flex;
 flex-wrap: wrap;
}
.mamă div {
 lățime: 100px;
 înălțime: 100px;
}

Valoarea de înfășurare va poziționa articolele începând din colțul din dreapta sus al containerului. Valoarea de înfășurare inversă va repoziționa articolele pentru a începe în colțul din dreapta jos al containerului. Când împachetați articolele, va împinge articolele pe un nou rând de mai sus în loc de dedesubt.

Dacă specificați o înălțime pe containerul părinte, containerul va adăuga spațiu între rândurile de articole.

Dacă doriți să eliminați această spațiere, dar să păstrați înălțimea div-ului părinte, utilizați proprietatea align-content. Specificați proprietatea align-content ca „flex-start” în div-ul părinte:

.mamă { 
 latime: 300px; 
 înălțime: 300px;
 chenar: 1px negru solid; 
 display: flex;
 flex-wrap: wrap; 
 aliniere-conținut: flex-start;
}

Proprietatea align-content este una dintre mai multe nuclee proprietăți flexbox care vă permit să controlați alinierea.

Vedeți codul pentru proprietatea flex-wrap în aceasta Fragment CodePen sa vezi cateva exemple.

Cum să împingeți articolele în coloana următoare

Dacă utilizați un aspect diferit (cum ar fi o coloană) și încă mai aveți nevoie de elemente pentru a încheia, puteți utiliza flex-flow proprietate. Această proprietate flexibilă este o combinație a proprietăților de flex-wrap și flex-direction.

Exemple de combinații de opțiuni pe care le puteți utiliza pentru proprietatea flex-flow includ:

flex-wrap: row nowrap | coloana nowrap | înfășurare rând | coloana wrap | rând wrap-reverse | coloană wrap-reverse

Această proprietate funcționează similar cu proprietatea flex-wrap de mai sus. Adăugați flex-flow la containerul flex părinte. Asigurați-vă că lățimea containerului părinte este suficient de mică pentru a forța articolele secundare să se împacheteze:

.mamă {
 latime: 300px; 
 chenar: 1px negru solid; 
 display: flex; 
 flex-flow: înfășurare coloană;
}
.mamă div {
 lățime: 100px;
 înălțime: 100px;
}

Elementele se vor înfășura în direcția specificată (rând sau coloană).

Vedeți codul pentru proprietatea flex-flow în acest Fragment CodePen sa vezi cateva exemple.

Cum se schimbă ordinea articolelor

Dacă trebuia să rearanjați elementele de pe pagină din cauza oricărui tip de date dinamice, puteți utiliza Ordin proprietate flexibilă. Această proprietate vă permite să specificați ordinea în care apare fiecare articol.

Numerele nu trebuie neapărat să înceapă de la 1. Puteți utiliza orice numere și intervale, iar proprietatea order va ordona elementele HTML de la cel mai mic la cel mai mare.

Adăugați proprietatea comenzii la fiecare dintre articolele din interiorul containerului flex părinte:

<div class="mamă">
<div class="roșu" stil="comanda: 2"></div>
<div class="portocale" stil="comanda: 1"></div>
<div class="galben" stil="comanda: 5"></div>
<div class="verde" stil="comanda: 4"></div>
<div class="albastru" stil="comanda: 3"></div>
</div>

În acest caz, caseta portocalie va fi în partea dreaptă, urmată de casetele roșii, albastre, verzi, apoi galbene.

Vedeți codul pentru proprietatea comenzii în acest articol Fragment CodePen sa vezi cateva exemple.

Experimentați cu mai multe proprietăți CSS pe site-ul dvs. web

Puteți folosi aceste proprietăți flexibile pentru a face site-ul dvs. mai receptiv. Aceasta include utilizarea proprietăților flex-grow, flex-shrink, flex-wrap, flex-flow și ordine flex.

De asemenea, puteți afla despre mai multe proprietăți flexibile pentru a vă ajuta să aliniați elementele HTML de pe site-ul dvs. web.

Cum să utilizați Flex pentru a alinia elementele HTML

Citiți în continuare

Despre autor