Den ultimative guide til Flexbox - indlæring gennem eksempler

Hvad er den bedste måde at forstå Flexbox på ? Lær det grundlæggende, og bygg derefter masser af ting. Og det er præcis, hvad vi skal gøre i denne artikel.

Et par ting at bemærke

• Denne artikel blev skrevet med mellemliggende udviklere i tankerne og antager, at du allerede ved lidt om Flexbox. Men…
• Hvis du kender noget CSS, men slet ikke kender Flexbox, skrev jeg en omfattende guide her (gratis artikel, 46 minutters læsning).
• Og hvis du ikke kender CSS særlig godt, anbefaler jeg at tage min komplette (praktiske) introduktion til CSS (betalt kursus med 74 lektioner).
• Du behøver ikke at følge eksemplerne i denne artikel i den rækkefølge, der er angivet her.
• Flexbox er kun en layoutteknik. Projekter fra den virkelige verden kræver mere end layout.
• Når du ser en notation som div.ohansden henviser til en div med klassens navn påohans

Eksempel 1: Sådan oprettes et fotogalleri med Flexbox

At få fotos til at køre i rækker og kolonner med Flexbox er lettere end de fleste mennesker opfatter.

Overvej en simpel markering som sådan:

Vi har 10 billeder inden for en main.gallery.

Antag, at den main.galleryblev designet til at dække den tilgængelige skærm.

.gallery { min-height: 100vh}

En hurtig bemærkning om billeder

Som standard er billeder inline-blockelementer. De har en bredde og højde. De forbliver på en linje undtagen når de er begrænset af størrelsen, f.eks. At billederne er for store til at passe på en linje.

Udgangspunktet

At sætte alt sammen, resultatet af al markering og stil ovenfor er dette:

Få nu Flexbox på scenen:

.gallery { display: flex }

På dette tidspunkt er billedernes standardopførsel ændret. De går fra at være inline-blockelementer til at væreflex-items.

Som et resultat af den indledte Flexbox-kontekst .gallery, bliver billederne nu presset til en enkelt linje. Plus, de ville strække sig langs lodret som sådan:

Dette er et resultat af Flexbox's standardadfærd:

1. Squash alle børneelementer til en enkelt linje. Pak ikke elementerne ind.

Dette er dårligt for et galleri, så vi ændrer denne adfærd som sådan:

.gallery { flex-wrap: wrap}

Dette vil nu omslutte elementerne og bryde dem til flere linjer, når det er relevant.

2. Billederne ombrydes nu til næste linje. Men de strækker sig stadig langs lodret. Vi ønsker bestemt ikke den adfærd, da den forvrænger billederne.

Den stretchadfærd skyldes den standard align-itemsværdi på flexcontainere.

align-items: stretch

Lad os ændre det:

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

Dette forhindrer, at billederne strækkes. De antager deres standard widthog height værdier.

De vil også justeres til starten af ​​den lodrette akse som vist nedenfor:

Nu har vi vores Flexbox-drevne galleri.

Fordelen ved at bruge Flexbox

På dette tidspunkt er der ikke meget fordel ved at bruge Flexbox. Vi har det samme udseende, som vi havde, før vi startede Flexbox- modellen.

Bortset fra at få et responsivt galleri gratis, kommer de andre fordele ved at bruge Flexbox fra de justeringsmuligheder, det medfører.

Husk, at flexcontaineren .galleryantager følgende egenskabsværdier. flex-direction: rowjustify-content: flex-startogalign-items: flex-start.

Galleriets layout kan skiftes på et øjeblik ved at lege med standardværdierne som vist nedenfor:

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

Som det ses på billedet ovenfor, vil dette justere billederne til midten langs vandret:

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

Som det ses på billedet ovenfor, justerer dette billederne både vandret og lodret til midten af .gallery

Med Flexbox kommer mange justeringsmuligheder. Du er velkommen til at lege med nogle flere justeringsmuligheder, som du finder passende.

Du kan se det faktiske Flexbox-galleri i denne CodePen.

Eksempel 2: Hvordan man bygger kort med Flexbox

Kort er blevet populære på Internettet. Google, Twitter, Pinterest, og det ser ud til, at alle andre flytter til kort.

Et kort er et UI-designmønster, der grupperer relateret information i en beholder i fleksibel størrelse. Det ligner visuelt et spillekort.

Der er mange gode anvendelser til kort. En almindelig er det berygtede prisnet.

Lad os bygge en.

Markup

Hvert kort antager en markering som nedenfor:

Der vil være mindst 3 kort. Pak kortene i endiv.cards

Nu har vi et overordnet element.

I dette eksempel er det overordnede element indstillet til at udfylde hele visningsfeltet.

.cards { min-height: 100vh}

Opsæt Flexbox

Den følgende kodeblok starter en Flexbox-formateringskontekst inden for .cards

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

Hvis du husker det sidste eksempel, flex-wrapvil det give mulighed for flex-itemsat bryde over på en anden linje.

Dette sker, når de underordnede elementer ikke kan passe ind i det overordnede element. Dette skyldes den større beregnede bredde på de kombinerede underordnede elementer.

Gå videre og giv den .cardindledende bredde.

Brug af Flexbox:

.card { flex: 0 0 250px}

Dette vil sætte flex-growog flex-shrinkværdier til 0. Den flex-basisværdi vil blive sat til250px

På dette tidspunkt vil kortene blive justeret til starten af ​​siden. De strækker sig også langs lodret.

I nogle tilfælde kan dette være ideelt til din brugssag. Men i de fleste tilfælde vil det ikke.

Standardadfærd for flexcontainere

Resultatet ovenfor skyldes flex-containernes standardopførsel.

Kortene begynder ved starten af ​​siden på top leftfordi justify-contenter indstillet til værdien flex-start.

Kortene strækkes også for at udfylde hele højden af ​​det overordnede element, fordi det align-itemser stretchsom standard indstillet.

Ændring af standardværdier

Vi kan opnå ret imponerende resultater ved at ændre standardværdierne, som Flexbox tilbyder.

Se nedenunder:

Se denne CodePen for at se det endelige projekt.

Eksempel 3: Hvordan man bygger gitre med Flexbox

Hele CSS-rammer er bygget på det koncept, der skal diskuteres i dette eksempel. Det er ret vigtige ting.

Hvad er et gitter?

Et gitter er en række krydsende lige lodrette og vandrette styrelinjer, der bruges til at strukturere indhold.

Hvis du er fortrolig med CSS-rammer som f.eks. Bootstrap, har du helt sikkert brugt gitre før nu.

Din kilometertal kan variere, men vi vil overveje at variere nettyper i dette eksempel.

Lad os starte med den første,grundlæggende gitre .

Grundlæggende gitre

Dette er net med følgende egenskaber:

• Gittercellerne skal være fordelt ens og udvide for at passe til hele rækken.
• Gittercellerne skal have samme højde.

Det er let at opnå dette med Flexbox. Overvej markeringen nedenfor:

 1 

Hver .rowvil være sin egen flexcontainer.

Hvert element inden .rowbliver derefter et flex-element. Alle flexgenstande fordeles jævnt over rækken.

Efter design skal det ikke have noget at vide om vi har 3 underordnede elementer

 1/3 1/3 1/3 

Eller 6 underordnede elementer

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

Eller 12 elementer

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

Løsningen

Der er kun to trin til at gøre dette.

1. Start en Flexbox-formateringskontekst:

.row { display: flex;}

2. Lad hver flex-itemudvide sig, så den passer til hele rækken i lige store forhold:

.row_cell { flex: 1}

Og det er det.

Løsningen forklaret.

flex: 1

flexer et stenografisk egenskabsnavn til indstilling af tre forskellige Flexbox-egenskaber, flex-growog flex-shrinkog flex-basisegenskaber, i den angivne rækkefølge.

flex: 1har kun værdien 1indstillet. Denne værdi tilskrives flex-grow ejendommen.

Egenskaberne flex-shrinkog flex-basisindstilles til 1og 0.

flex: 1 === flex: 1 1 0

Gitterceller med specifikke størrelser

Nogle gange er det, du ønsker, ikke en gitterrække med lige celler.

Du vil måske have celler, der er dobbelt så mange som de andre celler, eller en hvilken som helst brøkdel for den sags skyld.

Løsningen er ret enkel.

Til disse specifikke gitterceller skal du tilføje en modifikationsklasse som sådan:

.row_cell--2 { flex: 2}

Lad klassen medtages i markeringen. Se det første barn divi markeringen nedenfor:

 2x 1/3 1/3 

Cellen med klassen .row__cell--2vil være 2 gange standardcellerne.

For en celle, der tager 3 gange den ledige plads:

.row_cell--3 {

flex: 3

}

Gitterceller med specifikke justeringer

Takket være Flexbox behøver hver celle ikke at være bundet til en bestemt justeringsværdi. Du kan specificere den specifikke justering for enhver celle.

For at gøre dette skal du bruge modifikationsklasser som denne:

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

Dette justerer den specifikke celle til toppen af row.

Du skal også have føjet klassen til den specifikke celle i markeringen. Se det første barn divi markeringen nedenfor:

Nedenfor er de andre tilgængelige justeringsmuligheder:

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

.row_cell--center { align-self: center}

Samlet justering inden for rækkerne

Da specifikke celler kan justeres, kan hele underordnede elementer også være i rækken.

For at gøre dette skal du bruge en modifikationsklasse som sådan:

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

Det er vigtigt at bemærke, at ændringsklassen .row--topskal føjes til rowforælderen ellerflex-container

De andre justeringsmuligheder kan ses nedenfor:

.row--center { align-items: center}

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

Indlejrede gitre

Uden at gøre noget særligt kan disse rowsindlejres i sig selv.

Du kan se de endelige net, der oprettes her.

Endnu flere net

Mens du kan få smarte bygningsnet med Flexbox lodrette net og endnu mere komplekse konfigurationer, skal du bruge det bedste værktøj til jobbet. Lær, mestre og brug CSS Grid Layout. Det er den ultimative CSS-løsning til net.

Eksempel 4: Sådan oprettes websidelayouts med Flexbox

Samfundet rynker generelt med at bruge Flexbox til fuldblæst weblayouter.

Mens jeg er enig i dette, tror jeg også, at du i visse tilfælde kan komme væk med det.

Det vigtigste råd, jeg kan give her, ville være:

Brug Flexbox, hvor det giver mening

Jeg forklarer denne erklæring i det følgende eksempel.

The Holy Grail Layout

Hvilket bedre webstedslayout at bygge end den berygtede “ hellige gral ”?

Der er 2 måder at forsøge at opbygge dette layout med Flexbox på.

Den første er at have layoutet bygget med Flexbox. Placer header, footer, nav, articleog asidealt i ét flex-container.

Lad os begynde med det.

Markup

Overvej den grundlæggende markering nedenfor:

 Header  Article Nav Aside  Footer

Blandt andet er der en særlig regel, som den hellige gral overholder. Denne regel har inspireret markeringen ovenfor:

Den midterste kolonne articleskal vises først i markeringen, før de to sidepaneler navog aside.

Start Flexbox-formateringskonteksten

body { display: flex}

Fordi de underordnede elementer skal stables fra top til bund, skal Flexbox's standardretning ændres.

body { ... flex-direction: column}

1 . headerog footerskal have en fast bredde.

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

2.main skal laves til at udfylde den tilgængelige resterende plads inden forflex-container

main { flex: 1}

Forudsat at du ikke glemte, flex: 1svarer det til flex-grow: 1, flex-shrink: 1ogflex-basis: 0

På dette tidspunkt er vi nødt til at tage os af indholdet, inden for mainhvilket article, navog aside.

Opsat mainsom flex-container:

main { display: flex}

Få navog asidetag faste bredder:

nav,aside { width: 20vw}

Sørg for, at der articleoptager den resterende ledige plads:

article { flex: 1}

Der er bare en ting mere at gøre nu.

Ombestil flex-itemsså navvises først:

nav { order: -1}

Den orderegenskab bruges til genbestille position flex-items.

Alt flex-itemsi en container vises i stigendeorder værdier. De flex-itemmed de laveste orderværdier vises først.

Alle flex-itemshar en standardværdi orderpå 0.

The Holy Grail Layout (en anden løsning)

Den tidligere løsning brugte a flex-containersom den samlede beholder. Layoutet er stærkt afhængigt af Flexbox.

Lad os se en mere “fornuftig” tilgang. Se på det formodede endelige resultat igen:

headerog footerkunne behandles som blokelementer. Uden nogen indblanding udfylder de bredden på deres indeholdende element og stabler fra top til bund.

 Header  Article Nav Aside  Footer

Med denne tilgang ville det eneste flex-containernødvendige være main.

Den enestående udfordring med denne tilgang er, at du skal beregne højden af maindig selv. mainskal udfylde den ledige plads udover den plads, der optages af headerogfooter.

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

Overvej kodeblokken ovenfor. Det bruger CSS- calcfunktionen til at beregne højden påmain.

Uanset din kilometertal skal højden af mainvære lig medcalc(100vh — height of header — height of footer ).

Som i den foregående løsning skal du have givet headerog footeren fast højde. Gå derefter videre og behandl mainpå samme måde som i den foregående løsning.

Du kan se de faktiske resultater her.

2 kolonnewebsite layout

To kolonnelayouter er ret almindelige. De opnås også let ved hjælp af Flexbox.

Overvej markeringen nedenfor:

 sidebar main

Indled Flexbox-formateringskonteksten:

body { display: flex;}

Giv asideen fast bredde:

aside { width: 20vw}

Endelig skal du sikre dig, at mainfylder den resterende ledige plads:

main { flex: 1}

Det er stort set alt, hvad der er til det.

Eksempel 5: Medieobjekter med Flexbox

Medieobjekter er overalt. Fra tweets til Facebook-indlæg ser de ud til at være det bedste valg for de fleste UI-design.

Overvej markeringen nedenfor:

 Header 

Som du har gættet, .mediaetablerer du Flexbox-formateringskonteksten:

.media { display: flex}

Som standard strækkes den flex-itemsaf a containerlangs lodret for at udfylde den tilgængelige højde inden for flex-container.

Sørg for, at det .media-bodyoptager al den resterende ledige plads:

.media-body { flex: 1}

Lad os rette den strakte kasse.

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

Og det er det.

Et vendt medieobjekt

Du har ikke ændret htmlkildeordren for at oprette et spejlvendt medieobjekt.

Bare ombestil flex-items'erne sådan:

.media-object { order: 1}

Dette får billedet vist efter .media-bodyogmedia-heading

Et indlejret medieobjekt

Du kan endda fortsætte med at rede Media-objektet. Uden at ændre nogen af ​​de CSS-stilarter, vi har skrevet.

 Header 
 Header 

Det virker!

Et Unicode-medieobjekt

Det ser ud til, at vi ikke er begrænset til kun billeder.

Uden at ændre nogen af ​​de CSS-stilarter, der er skrevet, kan du få en unicode til at repræsentere billedet.

 ? 
 Header 

Jeg har lukket en emoji der.

Hvis du fjerner imgog erstatter den med en, der divindeholder den ønskede unicode, får du output ovenfor. Du kan få fat i nogle flere emoji-unicodes her.

Et HTML-objektmedieobjekt

Du har muligvis også brugt html-enheder som vist nedenfor.

 ☎ 
 Header 

HTML-enheden, der bruges i dette eksempel, er, ☎og du kan muligvis se resultatet nedenfor.

Du kan se resultatet af disse eksempler i denne CodePen.

Eksempel 6: Sådan oprettes formelementer med Flexbox

Det er vanskeligt at finde et websted, der ikke har en formular eller to i disse dage.

Overvej markeringen nedenfor:

  … …  …  …

Dette eksempel viser kombinationen af ​​at tilpasse indtastningsfelter med knapper eller tekstspænd. Løsningen igen er ret let med Flexbox.

Indled Flexbox-formateringskonteksten:

.form { display: flex}

Sørg for, at indtastningsfeltet optager den ledige plads:

.form__field { flex: 1}

Endelig kan du style de vedhæftede eller forudbyggede tekster og knapper, uanset hvilken måde du synes passer.

.form__item { ... }

Du kan se det komplette resultat af dette eksempel i denne CodePen.

Eksempel 7: Sådan oprettes et layout til en mobilapp med Flexbox

I dette eksempel vil jeg guide dig processen med mobilappens layout nedenfor:

Dette eksempel er dog anderledes.

Jeg vil forklare processen med at opbygge mobillayoutet i pseudokode, og du vil fortsætte med at opbygge det.

Dette vil være en form for praksis for at få dine hænder våde .

Trin 1

Fjern layoutet fra iPhone, og vi har dette:

Trin 2

Definer den indeholdende krop som en flex-container

Trin 3

Som standard er flex-directionaf a flex-containerindstillet til row. I dette tilfælde skal du ændre det til column.

Trin 4

Giv punkt 1 og 3 faste højder som f.eks height: 50px.

Trin 5

Punkt 2 skal have en højde, der fylder den ledige plads. Brug flex-groweller flexstenografiflex: 1.

Trin 6

Til sidst skal du behandle hver enkelt indholdsblok som et medieobjekt som set i et tidligere eksempel.

Følg de seks trin ovenfor for at kunne oprette mobilappens layout med succes.

Vil du blive Pro?

Download mit gratis CSS Grid snydeark, og få også to interaktive Flexbox-kurser af høj kvalitet gratis!

Få dem nu