Cum să utilizați Flexbox pentru a crea un aspect modern de design de card CSS

Datorită Flexbox, un nou mod de aspect în CSS3, putem obține toate cardurile la rând, la propriu. Modelele de carduri au crescut în popularitate în ultimii ani; După cum probabil ați observat, site-urile de socializare au într-adevăr îmbrățișat cardurile. Pinterest și Dribbble folosesc aspectul cardurilor pentru a prezenta informații și imagini. Și dacă vă place Material Design, cardurile Google sunt bine descrise în biblioteca lor de modele.

Îmi plac personal layout-urile cardurilor pentru lizibilitatea lor și cât de defilabile sunt. Ele prezintă „explozia” perfectă de informații într-un mod care este ușor de răsfoit, defilat și scanat simultan.

Cum se creează un aspect de card

Dacă ați încercat vreodată rânduri de conținut de înălțime egală, știți că construirea lor nu a fost întotdeauna ușoară. Probabil că ai fost nevoit să te lăutărești destul de mult ca să-l faci să funcționeze în trecut. Datorită Flexbox, acele zile sunt aproape în urmă. În funcție de nivelul de asistență pentru browser pe care trebuie să-l oferiți, poate fi necesar să includeți unele alternative, dar suportul pentru browser pentru această funcție este destul de fiabil în zilele noastre. Pentru a fi în siguranță, asigurați-vă că consultați Flexbox pe site-ul de încredere Can I use. Și nu uitați, nu ar trebui să faceți niciodată modificări pe site-ul dvs. live. Încercați să experimentați cu Local, o aplicație locală gratuită de dezvoltare WordPress.

Ideea de bază a Flexbox este că puteți seta proprietatea de afișare a unui container la flex , care va „flexa” dimensiunea tuturor containerelor din acesta. Coloanele de înălțime egală și opțiunile de scalare și contractare vor simplifica modul în care pot fi create machete avansate. Începând cu cărți este ca o foaie de înșelăciune Flexbox, dar odată ce stăpânești elementele de bază, poți crea machete mai complexe.

Flexbox și versatilitate

Cardurile sunt versatile, atractive din punct de vedere vizual și ușor de interacționat atât pe dispozitivele mari, cât și pe cele mici, ceea ce este perfect pentru design responsive. Fiecare card acționează ca un container de conținut care se extinde cu ușurință în sus sau în jos. Pe măsură ce dimensiunile ecranului devin mai mici, numărul de carduri din rând scade de obicei și încep să se stivuească pe verticală. Există o flexibilitate suplimentară, deoarece pot avea o înălțime fixă ​​sau variabilă.

Cum se creează aspectul

Vom crea un aspect de card Flexbox care are un rând de patru containere orizontale pe ecrane mai mari, două pe medii și o singură coloană pentru dispozitive mici.

Mai jos este fragmentul de cod pentru a crea un aspect de bază pentru afișarea a patru cărți. Nu includ conținutul interior al cardului (deoarece acesta devine prea lung în eșantioanele de cod), așa că asigurați-vă că puneți niște conținut inițial acolo (și cantitatea de conținut variază între cele patru carduri). De asemenea, există un rând de patru cărți afișate aici pentru a începe, dar mai multe pot fi adăugate dacă doriți să vedeți comportamentul cu mai multe rânduri de conținut. Tot codul poate fi găsit pe Codepen.

Pentru a afișa aspectul nostru într-un model de grilă, va trebui să începem din exterior și să ne străduim. Este important să ne asigurăm că faceți referire la containerul corect, altfel lucrurile vor deveni puțin dezordonate.

Secțiunea cu o clasă de .cards este ceea ce vom viza mai întâi. Proprietatea de afișare a containerului este ceea ce trebuie să schimbăm în flex .

Iată codul HTML cu care veți dori să începeți:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Iată CSS-ul pentru a începe:

.cards {
   display: flex;
   justify-content: space-between;
}

Proprietate Flex

Înainte de a intra prea adânc, este bine să cunoașteți elementele de bază ale proprietății flex. Proprietatea flex specifică lungimea articolului, în raport cu restul articolelor flexibile din interiorul aceluiași container. Proprietatea flex este o prescurtare pentru proprietățile flex-grow , flex-shrink și flex-basis . Valoarea implicită este 0 1 auto; . În opinia mea, cel mai bun mod de a înțelege pe deplin Flexbox este să te joci cu diferitele valori și să vezi ce se întâmplă.

Proprietatea flex-grow a unui articol flexibil specifică ce spațiu ar trebui să ocupe în interiorul containerului flexibil articolul.

Proprietatea flex-shrink specifică modul în care articolul se va micșora în raport cu restul articolelor flexibile din același container.

Proprietatea flex-basis specifică dimensiunea principală inițială a unui articol flexibil. Această proprietate determină dimensiunea casetei de conținut, dacă nu se specifică altfel utilizând dimensiunea casetei. Auto este implicit atunci când lățimea este definită de conținut, care este similar cu width: auto; . Va ocupa spațiu definit de propriul conținut. Poate exista o valoare specificată care rămâne adevărată așa cum se vede în baza flex-basis: 15em; . Dacă valoarea este 0, lucrurile sunt destul de setate, deoarece elementul nu se va extinde pentru a umple spațiul liber.

Am început cu display: flex; și justify-content: space-between; și în acest moment, lucrurile sunt puțin imprevizibile. Flexbox este folosit, chiar dacă nu este foarte evident în acest moment. Cu această declarație, fiecare dintre elementele flexibile a fost plasat unul lângă celălalt într-un rând orizontal.

Vezi asta pe Codepen.

Probabil vă întrebați de ce fiecare dintre aceste articole flexibile are o lățime diferită. Flexbox încearcă să descopere care este cea mai mică lățime implicită pentru fiecare dintre aceste elemente. Și din cauza diferitelor lungimi de cuvinte și a altor elemente de design, ajungeți să obțineți aceste cutii de dimensiuni diferite. Pentru a obține un aspect consistent, va trebui să lucrăm puțin mai mult. Setarea unui wrap și determinarea lățimii dorite va ajuta la transformarea acestora în cărți uniforme.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

În mod implicit, elementele flexibile vor încerca toate să se potrivească pe o singură linie. Adăugarea flex-wrap: wrap; face ca elementele să se înfășoare unele sub altele, deoarece implicit este lățimea completă.

Vezi asta pe Codepen.

Lățimea completă este excelentă pentru dispozitivele mici, așa că să ținem cont de acest lucru, deoarece planificăm ecranul nostru mai mare înainte de a aborda diferite puncte de întrerupere. Când schimbăm lățimea, cărțile încep să arate mai uniform.

Trebuie să adăugăm clasa .card acum pentru a stila cardurile noastre individuale. Acest lucru poate merge chiar sub stilurile .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Amintiți-vă de mai înainte, proprietatea flex este scurtă: flex-grow este 0, flex-shrink este 1 și width este de 24%. Adăugând o lățime specificată, aceasta ne oferă un rând de patru, cu puțin spațiu între ele.

Vezi asta pe Codepen.

Am stabilit proprietatea justify-content pentru spațiere. Primul element se afișează în stânga, al doilea și al treilea element sunt afișați în mijloc, iar al patrulea element este afișat în dreapta. Deoarece lățimea cardului este de 24%, a mai rămas ceva spațiu, deoarece cele patru coloane ale noastre la 24% nu totalizează 100%. Mai avem 4% mai exact. Acest 4% este plasat în mod egal între fiecare dintre articole. Deci avem aproximativ 1,33% din spațiu între cărți.

Vezi asta pe Codepen.

Putem fi mai precisi și prin utilizarea calc . Modificarea valorii flex-basis pentru a utiliza calc ar arăta cam așa:

.card {
	flex: 0 1 calc(25% - 1em);
}

Lucrul tare cu aceasta este că browserul va prelua 25% din spațiu și va elimina 1em din el, ceea ce face cărțile să fie puțin mai mici.

Este o modalitate inteligentă de a ajusta spațiul disponibil. 1em este distribuit uniform între articole și ajungem la aspectul perfect.

Până acum, chiar nu am vorbit prea mult despre înălțime. Am adăugat un alt rând de cărți pentru a demonstra cum funcționează înălțimea. Depinde care card are cel mai mult conținut – va urma înălțimea celorlalte. Prin urmare, fiecare rând de conținut va avea aceeași înălțime.

Aceasta este o vedere foarte „mărită”, dar veți observa că primul rând este destul de înalt, deoarece a doua carte are mai mult text decât celelalte din acel rând. Al doilea rând are mai puțin text, așa că în general este mai scurt.

Carduri pentru dispozitive mai mici

În prezent, avem patru coloane pe toate ecranele, ceea ce nu este chiar o bună practică. Dacă micșorați fereastra browserului, veți vedea că cele patru cărți devin mai stricate pe ecrane mai mici, ceea ce nu este ideal pentru lizibilitate. Din fericire, cu interogările media, lucrurile vor începe să arate mult mai bine.

Pentru a începe rezolvarea problemei, punctele de întrerupere specificate se vor asigura că conținutul este afișat corect pe toate tipurile de ecran.

Iată următoarele puncte de întrerupere care vor fi utilizate (nu ezitați să le utilizați și pe ale dvs., conceptele încă se aplică):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

A fost o gândire mare până acum. Să intrăm în mentalitatea de a primi pe mobil și să începem cu min-width: 40em breakpoint.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Cu aceste modificări, cardurile se vor afișa la lățimea întregului ecran și se vor stivui unele sub altele pe orice ecran mai mic de aproximativ 640 de pixeli lățime. Dacă extindeți fereastra browserului la orice mai sus, coloana cu patru se întoarce. Acest lucru are sens, deoarece există o min-width minimă de 40 em și aici am creat șirul de patru cărți.

Ceea ce lipsește aici este calea de mijloc. Pentru gama medie, a avea două cărți la rând este mai ușor de citit, mai degrabă decât cele patru cărți stricate. Înainte de a descoperi rândul de două carduri, trebuie adăugată o altă interogare media pentru a găzdui cele mai mari ecrane, care vor avea rândul de patru carduri.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Noua interogare media cu o min-width minimă de 60 em este locul în care vor fi declarate cele patru cărți. min-width minimă de 40em este locul unde va fi declarat rândul de două cărți. Magia se întâmplă cu valoarea flex calc de 50% – 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Cu această simplă schimbare, lucrurile merg acum! Reduceți și extindeți fereastra browserului pentru a vă asigura că totul pare corect.

Vezi asta pe Codepen.

Dacă rândurile tale de cărți arată corect, atunci ești gata! Dacă încercați acest tutorial și aveți un ultimul rând neuniform, continuați să citiți.

Conținut dinamic și spațierea ultimului rând de carduri

În funcție de numărul dvs. de cărți, este posibil să aveți sau nu un ultimul rând prost. Dacă există un ultimul rând complet sau doar o singură carte suplimentară, nu va exista nicio problemă. Uneori veți avea conținutul planificat în avans, dar dacă conținutul este dinamic, este posibil ca ultimul rând de carduri să nu se comporte așa cum ați vrut. Dacă există mai multe cărți suplimentare și este setat conținutul de justificare, spațiul dintre ele va uniformiza și este posibil să nu se alinieze cu rândurile de mai sus.

Pentru a obține acest aspect, este nevoie de un alt mod de a gândi. Aș spune că acest lucru nu este la fel de eficient, dar este relativ simplu.

Stilul .cards și .card a fost realizat în afara unei interogări media:

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Interogările media sunt acolo unde este determinat numărul de carduri:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Aruncă o privire la Codepen pentru a vedea soluția modificată.

Sperăm că acest lucru vă oferă o prezentare generală de bază a conceptelor Flexbox care vă vor ajuta să începeți. Flexbox are un suport destul de bun pentru browser, iar layout-urile cardurilor vor continua să fie utilizate în designul site-urilor web. Și amintiți-vă, aspectele cardurilor sunt doar începutul modului în care puteți utiliza Flexbox.

Următorul: Proiectați mai rapid site-urile WordPress

În acest ghid, vom acoperi sfaturi despre cum să lucrați mai rapid și să vă accelerați fluxul de lucru WordPress. De la configurarea inițială a site-ului până la punerea lui în direct, descoperiți cum puteți reduce ore de lucru din munca de zi cu zi!

Descărcați ghidul gratuit aici!

Ce altceva ai construit folosind Flexbox? Împărtășește-ți proiectele în comentarii!