Krajnji vodič za Flexbox - učenje kroz primjere

Koji je najbolji način za razumijevanje Flexboxa ? Naučite osnove, a zatim izgradite puno stvari. I upravo ćemo to učiniti u ovom članku.

Nekoliko stvari koje treba napomenuti

  • Ovaj je članak napisan imajući na umu razvojne programere i pretpostavlja da već znate ponešto o Flexboxu. Ali…
  • Ako znate neki CSS, a ne znate Flexbox, ovdje sam napisao opsežni vodič (besplatan članak, 46 minuta čitanja).
  • A ako CSS ne poznajete dobro, preporučujem polaganje cjelovitog (praktičnog) Uvoda u CSS (plaćeni tečaj sa 74 lekcije).
  • Ne morate slijediti primjere u ovom članku ovdje navedenim redoslijedom.
  • Flexbox je samo tehnika postavljanja. Projekti iz stvarnog svijeta zahtijevaju više od izgleda.
  • Kada vidite oznaku koja div.ohansse odnosi na div s imenom klaseohans

Primjer 1: Kako napraviti fotogaleriju pomoću Flexboxa

Pokretanje fotografija u redovima i stupcima pomoću Flexboxa jednostavnije je nego što većina ljudi opaža.

Razmislite o jednostavnom označavanju, otprilike ovako:

Imamo 10 slika unutar main.gallery.

Pretpostavimo da main.galleryje stilizirano da pokrije dostupni zaslon.

.gallery { min-height: 100vh}

Kratka bilješka o slikama

Prema zadanim postavkama slike su inline-blockelementi. Imaju širinu i visinu. Oni će ostati na liniji, osim ako su ograničeni veličinom, kao što su slike prevelike da stanu na liniju.

Početna točka

Sastavljajući sve, rezultat svih gornjih oznaka i stilova je sljedeći:

Sada izvedite Flexbox na scenu:

.gallery { display: flex }

U ovom se trenutku promijenilo zadano ponašanje slika. Oni prelaze iz bića inline-blocku bitakflex-items.

Kao rezultat Flexbox konteksta pokrenutog unutar .gallery, slike će se sada zgužvati u jedan redak. Osim toga, protezali bi se duž okomice tako:

Ovo je rezultat zadanog ponašanja Flexboxa:

  1. Skupite sve podređene elemente u jednu liniju. Nemojte zamotati elemente.

To je loše za galeriju, pa ovo ponašanje mijenjamo ovako:

.gallery { flex-wrap: wrap}

Ovo će sada omotati elemente i po potrebi ih razbiti na više linija.

2. Slike se sada prebacuju u sljedeći redak. Ali oni se i dalje protežu uzduž vertikale. Sigurno ne želimo takvo ponašanje jer iskrivljuje slike.

stretchPonašanje s obzirom na zadanu align-itemsvrijednost na flexkontejnerima.

align-items: stretch

Promijenimo to:

.gallery { ... align-items: flex-start}

To će spriječiti istezanje slika. Pretpostavit će svoje zadane vrijednosti widthi height vrijednosti.

Također će se poravnati s početkom vertikalne osi kako je prikazano dolje:

Sada imamo našu galeriju s pogonom Flexbox.

Prednost upotrebe Flexboxa

U ovom trenutku nema velike prednosti upotreba Flexboxa. Imamo isti izgled kakav smo imali prije pokretanja modela Flexbox .

Osim što ćete dobiti responzivnu galeriju besplatno, ostale prednosti korištenja Flexboxa dolaze iz opcija poravnanja koje donosi.

Ne zaboravite da flex spremnik .gallerypoprima sljedeće vrijednosti svojstava. flex-direction: rowjustify-content: flex-startialign-items: flex-start.

Izgled galerije može se u trenu prebaciti poigravajući se zadanim vrijednostima kao što je prikazano dolje:

.gallery { ... justify-content:center;}

Kao što se vidi na gornjoj slici, ovo će slike poravnati prema središtu, uzduž horizontale:

.gallery { ... justify-content:center; align-items: center;}

Kao što se vidi na gornjoj slici, ovo poravnava slike vodoravno i okomito prema središtu .gallery

S Flexboxom dolazi puno mogućnosti poravnanja. Slobodno se igrajte s još nekim mogućnostima poravnanja kako smatrate potrebnim.

U ovom CodePenu možete pogledati stvarnu Flexbox galeriju.

Primjer 2: Kako izraditi kartice s Flexboxom

Karte su postale popularne na internetu. Google, Twitter, Pinterest, a čini se da svi ostali prelaze na kartice.

Kartica je obrazac dizajna korisničkog sučelja koji grupira povezane podatke u spremnik fleksibilne veličine. Vizualno podsjeća na kartu za igranje.

Karte se mogu dobro koristiti. Uobičajena je zloglasna cjenovna mreža.

Izgradimo jedan.

Oznaka

Svaka će karta pretpostaviti oznaku kao u nastavku:


    

    Bit će najmanje 3 karte. Zamotajte karte u adiv.cards

    Sad imamo nadređeni element.

    U ovom je primjeru nadređeni element postavljen tako da ispunjava cijeli prikaz.

    .cards { min-height: 100vh}

    Postavite Flexbox

    Sljedeći blok koda pokrenut će Flexbox kontekst formatiranja unutar .cards

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

    Ako se sjećate posljednjeg primjera, flex-wrapomogućit flex-itemsće prelazak na drugu liniju.

    To se događa kada se podređeni elementi ne mogu uklopiti u nadređeni element. To je zbog veće izračunate veličine širine kombiniranih podređenih elemenata.

    Samo naprijed i dajte .cardpočetnu širinu.

    Korištenje Flexboxa:

    .card { flex: 0 0 250px}

    To će postaviti flex-growi flex-shrinkvrijednosti 0. flex-basisVrijednost će biti postavljena na250px

    U ovom će se trenutku karte poravnati s početkom stranice. Također će se protezati uzduž vertikale.

    U nekim slučajevima ovo može biti idealno za vaš slučaj upotrebe. Ali u većini slučajeva neće.

    Zadano ponašanje fleksibilnih spremnika

    Do gornjeg rezultata dolazi zbog zadanog ponašanja flex spremnika.

    Karte počinju na početku stranice top leftjer justify-contentje postavljena na vrijednost flex-start.

    Također, kartice se protežu kako bi popunile cijelu visinu nadređenog elementa jer align-itemsje zadano postavljeno na stretch.

    Promjena zadanih vrijednosti

    Promjenom zadanih vrijednosti koje nudi Flexbox možemo postići prilično impresivne rezultate.

    Pogledaj ispod:

    Da biste pogledali konačni projekt, pogledajte ovaj CodePen.

    Primjer 3: Kako izraditi mreže s Flexboxom

    Čitavi CSS okviri izgrađeni su na konceptu o kojem će se raspravljati u ovom primjeru. To su prilično važne stvari.

    Što je rešetka?

    Mreža je niz presijecanih ravnih okomitih i vodoravnih vodilica koje se koriste za strukturiranje sadržaja.

    Ako ste upoznati s CSS okvirima kao što je Bootstrap, tada ste sigurno već koristili rešetke.

    Vaša se kilometraža može razlikovati, ali u ovom ćemo primjeru razmotriti različite vrste mreža.

    Krenimo s prvim,osnovne mreže .

    Osnovne rešetke

    To su rešetke sa sljedećim karakteristikama:

    • Stanice mreže trebale bi biti jednako raspoređene i proširiti se tako da odgovaraju cijelom redu.
    • Stanice mreže trebale bi biti jednake visine.

    To je lako postići s Flexboxom. Razmotrite oznake u nastavku:

     1 

    Svaki .rowće biti svoj vlastiti flex spremnik.

    Svaki unutarnji element .rowtada postaje fleksibilna stavka. Svi se flex elementi ravnomjerno raspoređuju po redu.

    Prema dizajnu, ne bi trebalo biti važno imamo li 3 podređena elementa

     1/3 1/3 1/3 

    Ili 6 dječjih elemenata

     1/6 1/6 1/6 1/6 1/6 1/6 

    Ili 12 elemenata

     1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 

    Rješenje

    Postoje samo dva koraka za to.

    1. Pokrenite kontekst formatiranja Flexbox:
    .row { display: flex;}

    2. Neka se svaki flex-itemproširi tako da stane cijeli red u jednakim omjerima:

    .row_cell { flex: 1}

    I to je to.

    Objašnjeno rješenje.

    flex: 1

    flexje skraćeno ime svojstva za postavljanje tri različita Flexbox svojstva flex-grow, flex-shrinki flex-basissvojstva, prema navedenom redoslijedu.

    flex: 1samo je vrijednost 1postavljena. Ova se vrijednost pripisuje flex-grow svojstvu.

    flex-shrinkI flex-basissvojstva će biti postavljen na 1i 0.

    flex: 1 === flex: 1 1 0

    Mrežne stanice s određenim veličinama

    Ponekad ono što želite nije mrežni red jednakih ćelija.

    Možda ćete htjeti stanice koje su dvostruko veće od ostalih stanica ili bilo koji djelić.

    Rješenje je prilično jednostavno.

    Ovim specifičnim mrežnim ćelijama dodajte klasu modifikatora poput ove:

    .row_cell--2 { flex: 2}

    Neka razred bude uključen u oznaku. Pogledajte prvo dijete divu oznaci ispod:

     2x 1/3 1/3 

    Ćelija s klasom .row__cell--2bit će dva puta veća od zadanih ćelija.

    Za ćeliju koja zauzima 3 puta veći raspoloživi prostor:

    .row_cell--3 {

    flex: 3

    }

    Mrežne ćelije s određenim poravnanjima

    Zahvaljujući Flexboxu, svaka ćelija ne mora biti vezana uz određenu vrijednost poravnanja. Možete odrediti određeno poravnanje za bilo koju ćeliju.

    Da biste to učinili, upotrijebite modifikacijske klase poput ove:

    .row_cell--top { align-self: flex-start}

    Ovo će poravnati određenu ćeliju prema vrhu row.

    Sigurno ste klasu dodali i u određenu ćeliju u oznaci. Pogledajte prvo dijete divu oznaci ispod:

    Ispod su ostale dostupne opcije poravnanja:

    .row_cell--bottom { align-self: flex-end}
    .row_cell--center { align-self: center}

    Cjelokupno usklađivanje u redovima

    Kako se određene stanice mogu poravnati, tako to mogu i cijeli podređeni elementi unutar reda.

    Da biste to učinili, upotrijebite klasu modifikatora poput ove:

    .row--top { align-items: flex-start}

    Važno je napomenuti da se klasa modifikatora .row--topmora dodati rowroditelju iliflex-container

    Ostale opcije poravnanja mogu se vidjeti u nastavku:

    .row--center { align-items: center}
    .row--bottom { align-items: flex-end}

    Ugniježđene rešetke

    Bez ičega posebnog, oni rowsse mogu ugnijezditi u sebi.

    Ovdje možete pogledati konačne rešetke.

    Još više mreža

    Iako s Flexbox okomitim mrežama i još složenijim konfiguracijama možete dobiti fensi građevinske rešetke, za posao koristite najbolji alat. Naučite, savladajte i koristite CSS raspored mreže. To je vrhunsko CSS rješenje za mreže.

    Primjer 4: Kako izraditi izgled web stranica pomoću Flexboxa

    Zajednica se uglavnom mršti kad koristi Flexbox za cjelovite web postavke.

    Iako se s tim slažem, također mislim da se u određenim slučajevima možete izvući.

    Najvažniji jedini savjet koji ovdje mogu dati bio bi:

    Koristite Flexbox tamo gdje to ima smisla

    Objasnit ću tu izjavu u sljedećem primjeru.

    Izgled Svetog grala

    Kakav bolji izgled web stranice napraviti od zloglasnog " svetog grala "?

    Postoje 2 načina za pokušaj izgradnje ovog izgleda s Flexboxom.

    Prvo je da se izgled izgradi pomoću Flexboxa. Stavite header, footer, nav, articlei asidesve u jednom flex-container.

    Počnimo s tim.

    Oznaka

    Razmotrite osnovnu oznaku u nastavku:

     Header  Article Nav Aside  Footer

    Između ostalih, postoji određeno pravilo kojega se drži sveti gral. Ovo je pravilo nadahnulo gornju oznaku:

    Središnji stupac articletrebao bi se pojaviti prvi u oznaci, prije dvije bočne trake, navi aside.

    Pokrenite kontekst formatiranja Flexbox

    body { display: flex}

    Budući da bi se podređeni elementi trebali slagati odozgo prema dolje, zadani smjer Flexboxa mora se promijeniti.

    body { ... flex-direction: column}

    1 . headeri footertrebao bi imati fiksnu širinu.

    header,footer { width: 20vh /*you can use pixels e.g. 200px*/}

    2.main mora se izvršiti tako da se popuni preostali preostali prostor unutarflex-container

    main { flex: 1}

    Pod pretpostavkom da niste zaboravili, flex: 1je ekvivalent flex-grow: 1, flex-shrink: 1iflex-basis: 0

    U ovom trenutku, moramo voditi brigu o sadržaju unutar mainkoje su article, navi aside.

    Postavi mainkao flex-container:

    main { display: flex}

    Imajte navi asidezauzmite fiksne širine:

    nav,aside { width: 20vw}

    Obavezno articlezauzmite preostali raspoloživi prostor:

    article { flex: 1}

    Sad je još samo jedna stvar za napraviti.

    Promijenite redoslijed flex-itemstako da navse prvo prikazuje tako:

    nav { order: -1}

    orderSvojstvo se koristi za ponovno naručiti položaju flex-items.

    Sve flex-itemsunutar spremnika prikazat će se u sve većimorder vrijednostima. Prvo flex-itemse orderpojavljuju znakovi s najmanjim vrijednostima.

    Svi flex-itemsimaju zadanu ordervrijednost 0.

    Izgled Svetog grala (drugo rješenje)

    Prethodno rješenje koristilo je flex-containerkao ukupni spremnik. Izgled uvelike ovisi o Flexboxu.

    Pogledajmo "zdraviji" pristup. Pogledajte ponovno navodni konačni rezultat:

    headeri footermogli bi se tretirati kao blok elementi. Bez ikakvih intervencija popunit će širinu svog elementa koji se nalazi i složiti odozgo prema dolje.

     Header  Article Nav Aside  Footer

    Ovim pristupom jedino što flex-containerbi trebalo biti main.

    Jedini izazov s ovim pristupom je taj što morate izračunati visinu mainsebe. maintreba ispuniti raspoloživi prostor osim prostora koji zauzimaju headerifooter.

    main { height: calc(100vh - 40vh);}

    Razmotrite gornji blok koda. Za calcizračun visine koristi CSS funkcijumain.

    Bez obzira na vašu kilometražu, visina mainmora biti jednakacalc(100vh — height of header — height of footer ).

    Kao i u prethodnom rješenju, i vi ste trebali dati headeri footerfiksnu visinu. Zatim nastavite i ponašajte se mainna isti način kao u prethodnom rješenju.

    Stvarne rezultate možete pogledati ovdje.

    Izgledi web mjesta u 2 stupca

    Izgledi s dva stupca prilično su česti. Također se lako postižu pomoću Flexboxa.

    Razmotrite oznake u nastavku:

     sidebar main

    Pokrenite kontekst formatiranja Flexbox:

    body { display: flex;}

    Dajte asidefiksnu širinu:

    aside { width: 20vw}

    Na kraju, osigurajte da mainpopunite preostali raspoloživi prostor:

    main { flex: 1}

    To je gotovo sve što postoji.

    Primjer 5: Medijski objekti s Flexboxom

    Medijski objekti su posvuda. Od tweetova do objava na Facebooku, čini se da su oni najbolji izbor za većinu dizajna korisničkog sučelja.

    Razmotrite oznake u nastavku:

    Header

    Kao što ste pretpostavili, .mediauspostavit će se kontekst formatiranja Flexbox:

    .media { display: flex}

    Prema zadanim postavkama, flex-itemsa containerse protežu duž okomice kako bi popunili raspoloživu visinu unutar flex-container.

    Obavezno .media-bodyzauzmite sav preostali raspoloživi prostor:

    .media-body { flex: 1}

    Popravimo razvučenu kutiju.

    .media { ... align-items: flex-start}

    I to je to.

    Preokrenuti medijski objekt

    Nemate promjenu htmlredoslijeda izvora za stvaranje preokrenutog medijskog objekta.

    Samo preuredite flex-items ovako:

    .media-object { order: 1}

    Ovo će imati sliku prikazanu nakon .media-bodyimedia-heading

    Ugniježđeni medijski objekt

    Možete čak nastaviti gnijezditi objekt Media. Bez promjene bilo kojeg od CSS stilova koje smo napisali.

    Header

    Header

    Radi!

    Medijski objekt Unicodea

    Čini se da nismo ograničeni samo na slike.

    Bez mijenjanja bilo kojeg napisanog CSS stila, možete imati unicode koji predstavlja sliku.

     ? 

    Header

    Tamo sam se ugurao u emoji.

    Oduzimanje imgi zamjena sa divsadržajem željenog unicodea daje gornji izlaz. Ovdje možete zgrabiti još nekoliko emoji unicoda.

    Medijski objekt HTML entiteta

    Možda ste koristili i html entitete kako je prikazano u nastavku.

    Header

    Html entitet korišten u ovom primjeru je i možda ćete vidjeti rezultat u nastavku.

    Rezultat ovih primjera možete pogledati u ovom CodePenu.

    Primjer 6: Kako izraditi elemente obrasca pomoću Flexboxa

    Teško je pronaći bilo koju web stranicu koja danas nema obrazac ili dva.

    Razmotrite oznake u nastavku:

      … …  …  …

    Ovaj primjer prikazuje kombinaciju poravnavanja polja za unos s gumbima ili rasponima teksta. Rješenje je opet vrlo jednostavno s Flexboxom.

    Pokrenite kontekst formatiranja Flexbox:

    .form { display: flex}

    Osigurajte da polje za unos zauzima raspoloživi prostor:

    .form__field { flex: 1}

    Konačno, možete oblikovati dodane ili dodane tekstove i gumbe na bilo koji način koji vam se čini prikladnim.

    .form__item { ... }

    Kompletni rezultat ovog primjera možete pogledati u ovom CodePenu.

    Primjer 7: Kako izraditi izgled mobilne aplikacije s Flexboxom

    U ovom primjeru dovest ću vas do sljedećeg postupka izgleda mobilne aplikacije:

    Međutim, ovaj je primjer drugačiji.

    Objasnit ću postupak izrade mobilnog izgleda u pseudo kodu, a vi ćete ga nastaviti graditi.

    Ovo će biti oblik vježbanja za vlaženje ruku .

    Korak 1

    Skinite izgled s iPhonea i imamo ovo:

    Korak 2

    Definirajte tijelo koje sadrži kao a flex-container

    3. korak

    Prema zadanim postavkama, flex-directionvrijednost a flex-containerje postavljena na row. U ovom slučaju promijenite ga u column.

    4. korak

    Dajte stavke 1 i 3 fiksne visine kao što su height: 50px.

    Korak 5

    Stavka 2 mora imati visinu koja ispunjava raspoloživi prostor. Koristite flex-growili flexstenografijuflex: 1.

    Korak 6

    Konačno, tretirajte svaki blok sadržaja kao medijski objekt kao što je vidljivo u ranijem primjeru.

    Slijedite šest gornjih koraka za uspješnu izradu izgleda mobilne aplikacije.

    Želite li postati profesionalac?

    Preuzmite moj besplatni CSS Grid cheats sheet, a također dobijte dva kvalitetna interaktivna Flexbox tečaja besplatno!

    Uzmi ih odmah