Den ultimative guide til Flexbox - Læring gennem eksempler

Bemærk - dette er en længe læst, så hvis du vil, kan du downloade denne artikel og læse den offline her.

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

Et par ting at bemærke

  • Denne artikel er skrevet med mellemudviklere i tankerne og antager, at du allerede ved lidt om Flexbox. Men…
  • Hvis du kender noget CSS, men overhovedet ikke kender Flexbox, skrev jeg en omfattende guide her (gratis artikel, 46 minutters læsning).
  • Og hvis du ikke kender CSS meget 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 anført her.
  • Flexbox er kun en layoutteknik. Projekter i den virkelige verden kræver mere end layout.
  • Når du ser en notation som div.ohans henviser det til en div med et klassens navn på ohans

Eksempel 1: Sådan oprettes et fotogalleri med Flexbox

At gøre fotos kørt i rækker og kolonner med Flexbox er lettere, end de fleste opfatter.

Overvej en simpel markering som sådan:


  
  
  
  
  
  
  
  
  
  

Vi har 10 billeder i et hovedgalleri.

Antag, at hovedgalleriet var stylet til at dække den tilgængelige skærm.

.gallery {
   min. højde: 100vh
}

En hurtig note om billeder

Som standard er billeder inline-block-elementer. De har en bredde og højde. De forbliver på en linje, undtagen når de er begrænset af størrelse, så billederne er for store til at passe på en linje.

Udgangspunktet

Ved at sammensætte alting er resultatet af al markup og stil herover:

10 billeder med deres bredde- og højdedeklaration intakt. De falder til næste linje, når det er relevant. Lydige gutter;)

Få nu Flexbox på scenen:

.gallery {
    display: flex
 }

På dette tidspunkt er billederens standardadfærd ændret. De går fra at være inline-block-elementer til at være flex-items.

Som et resultat af Flexbox-konteksten, der blev indledt inden for .gallery, vil billederne nu blive klemt sammen til en enkelt linje. Plus, de ville strække sig langs lodret sådan:

Billederne strækker sig nu langs lodret og klemmes sammen til en linje. Intet er grimere :(

Dette er et resultat af Flexbox-standardadfærden:

  1. Squash alle børn elementer til en enkelt linje. Indpak ikke elementerne.

Dette er dårligt for et galleri, så vi ændrer denne opførsel sådan:

.gallery {
    flex-wrap: wrap
}

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

Med ændret indpakningsværdi indpakkes billederne nu til den næste linje

2. Billederne indpakkes nu til den næste linje. Men de strækker sig stadig langs lodret. Vi vil bestemt ikke have den opførsel, da den forvrænger billederne.

Strækadfærden skyldes standardværdien for justeringselementer på flexcontainere.

justere genstande: stræk

Lad os ændre det:

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

Dette forhindrer, at billederne strækker sig. De antager deres standardværdier for bredde og højde.

De justerer sig også efter starten af ​​den lodrette akse som vist nedenfor:

Nu har vi billeder, der ikke er forvrænget. Det er stort set, hvor vi begyndte, før vi introducerede Flexbox.

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 look, 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 justeringsindstillinger, det bringer.

Husk, at flexbeholderen .gallery antager følgende egenskabsværdier. Flekseretning: række retfærdiggør indhold: flex-start og juster elementer: flex-start.

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

.gallery {
   ...
   retfærdiggøre-indhold: center;
}
Billederne er nu perfekt centreret langs vandret.

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

.gallery {
   ...
   retfærdiggøre-indhold: center;
   align-items: center;
}
Ved at tage skridt videre har vi billederne perfekt tilpasset til midten (vandret og lodret)

Som det ses på billedet ovenfor, justerer dette billeder både vandret og lodret mod midten af ​​.galleriet

Med Flexbox kommer en masse justeringsindstillinger. Du er velkommen til at lege med nogle flere justeringsmuligheder, som du finder det passende.

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

Eksempel 2: Sådan bygger du 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 med fleksibel størrelse. Det ligner visuelt et spillekort.

Der er mange gode anvendelser til kort. Et almindeligt er det berygtede prisnettet.

prøve prissætning af gittermodel

Lad os opbygge en.

Markup

Hvert kort antager en markering som nedenfor:

  
  
  
        
  •     
  •     
  •      

Der vil være mindst 3 kort. Pakk kortene ind i et div.kort

Nu har vi et overordnet element.

I dette eksempel er overordnede elementer konfigureret til at udfylde hele visningen.

.kort {
   min. højde: 100vh
}

Opsæt Flexbox

Den følgende kodeblok initierer en Flexbox-formateringskontekst inden for .kort

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

Hvis du husker det sidste eksempel, giver flex-wrap mulighed for, at flex-emnerne kan bryde på en anden linje.

Dette sker, når børnelementerne ikke kan passe ind i overordnede elementer. Dette skyldes den større beregnede breddestørrelse på de kombinerede underordnede elementer.

Gå videre og giv .kortet en indledende bredde.

Brug af Flexbox:

.kort {
  flex: 0 0 250 px
}

Dette indstiller flex-grow og flex-shrink-værdierne til 0. Flex-basis-værdien indstilles til 250px

På dette tidspunkt justeres kortene til starten af ​​siden. De vil også strække sig langs lodret.

kort justeret til starten af ​​siden

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

Standardadfærden for Flex-containere

Resultatet ovenfor skyldes standardadfærden hos flexcontainere.

Kortene begynder i starten af ​​siden øverst til venstre, fordi indholdet af justify er indstillet til værdien flex-start.

Kortene strækker sig også for at udfylde hele højden af ​​det overordnede element, fordi alignelementer er indstillet til at strække som standard.

Ændring af standardværdier

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

Se nedenunder:

align-items: flex-start; justify-content: centeralign-items: flex-end; justify-content: centeralign-items: center; justify-content: center

Se denne CodePen for at se det endelige projekt.

Eksempel 3: Hvordan man bygger gitter med Flexbox

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

Hvad er et gitter?

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

en række krydsende lige (lodrette, vandrette) føringslinjer

Hvis du er bekendt med CSS-rammer som Bootstrap, er du sikker på, at du har brugt gitter før nu.

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

Lad os starte med det første, basale gitre.

Grundlæggende gitre

Et sæt grundlæggende gitter, der hver har lige store indbyrdes fordelte kolonner

Dette er gitter med følgende egenskaber:

  • Gittercellerne skal være ligeligt fordelt og udvide til 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 .row vil være sin egen flex-container.

Hvert element inden i .row bliver derefter et flexelement. Alle flex-emner distribueres jævnt på tværs af rækken.

Ved design burde det ikke have nogen betydning, om vi har 3 underordnede elementer

  
1/3
  
1/3
  
1/3

Eller 6 børnelementer

  
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 skridt til at gøre dette.

  1. Start en Flexbox-formateringskontekst:
.row {
   display: flex;
}

2. Få hvert flex-element udvidet til at passe til hele rækken i lige forhold:

.row_cell {
   flex: 1
}

Og det er det.

Løsningen forklaret.

flex: 1

flex er et kortere egenskabsnavn til indstilling af tre forskellige Flexbox-egenskaber, flex-grow, flex-shrink og flex-base egenskaber, i den angivne rækkefølge.

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

Egenskaberne med flex-krympning og flex-basis indstilles til 1 og 0.

flex: 1 === flex: 1 1 0

Netceller med specifikke størrelser

Nogle gange er det, du ikke ønsker, ikke en rutenet med lige celler.

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

gitter af rækkeceller, der er 2x eller 3x de andre celler.

Løsningen er ret enkel.

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

.row_cell - 2 {
   flex: 2
}

Lad klassen være med i markeringen. Se det første barn div i markeringen nedenfor:

  
2x
  
1/3
  
1/3

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

For en celle, der tager 3 gange den tilgængelige plads:

.row_cell - 3 {
 flex: 3
}

Netceller med specifikke justeringer

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

Det gør du ved at bruge modifikationsklasser som denne:

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

Dette justerer den specifikke celle øverst på rækken.

anvendelse af .row_cell - topklasse justerer den specifikke celle øverst på rækken

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

  
  
  

Nedenfor er de andre tilgængelige justeringsindstillinger:

.row_cell - bund {
  align-self: flex-end
}
ved anvendelse af .row_cell - bundklasse justeres den specifikke celle til bunden af ​​rækken
.row_cell - center {
  align-self: center
}
Anvendelse af .row_cell - center klassen justerer den specifikke celle efter midten af ​​rækken

Overordnet justering inden for rækkerne

Da specifikke celler kan justeres, så kan hele underordnede elementer i rækken.

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

.row - top {
   align-items: flex-start
}
en række med alle tre celler på linje med toppen af ​​rækken.

Det er vigtigt at bemærke, at modifikatorklassen, .row - top skal føjes til rækken eller den overordnede flex-container

  
  
  

De andre justeringsindstillinger kan ses nedenfor:

.row - center {
   align-items: center
}
en række med alle tre celler på linje med midten af ​​rækken.
.row - bund {
   align-items: flex-end
}
en række med alle tre celler på linje med midten af ​​rækken.

Indlejrede gitre

Uden at gøre noget særligt, kan disse rækker indlejres i sig selv.

En række med to celler, den ene 2x den anden. Inden i den større celle er en række med tre centrerede celler indlejret.

Du kan se de endelige gitre oprettet her.

Endnu flere gitre

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

Eksempel 4: Sådan oprettes webstedslayouts med Flexbox

Samfundet rynker generelt ved at bruge Flexbox til fuldblæst weblayout.

Selvom jeg er enig i dette, tror jeg også, at du i visse tilfælde kan slippe af med det.

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

Brug Flexbox, hvor det giver mening

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

Den hellige grallayout

Hvilken bedre websidelayout skal man bygge end den berygtede “hellige gral”?

Det hellige grallayout - header, sidefod og 3 andre containere med indhold.

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

Den første er at have layoutet bygget med Flexbox. Placer overskrift, sidefod, nav, artikel og til side alt i en flex-container.

Lad os begynde med det.

Markup

Overvej grundlæggende markering nedenfor:


  
Sidehoved        
Artikel     

Der er blandt andet en særlig regel, som den hellige gral holder sig til. Denne regel har inspireret markeringen ovenfor:

Den midterste søjle, artikel skal vises først i markeringen, før de to sidebjælker, nav og til side.

“<article> </article>” vises først i markeringen, men er centreret i layoutet.

Start Flexbox-formateringskonteksten

krop {
   display: flex
}

Da underordnede elementer skal stables fra top til bund, skal standardretningen for Flexbox ændres.

krop {
 ...
 flex-retning: kolonne
}

1. header og sidefod skal have en fast bredde.

header,
sidefod {
  bredde: 20vh / * du kan bruge pixels f.eks. 200 pixel * /
}

2.main skal udføres for at udfylde den tilgængelige resterende plads i flex-containeren

vigtigste {
   flex: 1
}

Forudsat at du ikke har glemt, flex: 1 svarer til flex-grow: 1, flex-shrink: 1 og flex-base: 0

Dette vil medføre, at hovedparten

På dette tidspunkt er vi nødt til at tage os af indholdet inden for de vigtigste, der er artikler, nav og til side.

Opsæt hoved som en flex-container:

vigtigste {
  display: flex
}

Lad navet og til side tage faste bredder op:

nav,
til side {
  bredde: 20vw
}

Sørg for, at artiklen optager den resterende tilgængelige plads:

artikel {
   flex: 1
}

Der er bare én ting mere at gøre nu.

Ombestil flex-elementerne, så nav vises først:

nav {
  rækkefølge: -1
}
Det endelige resultat. https://codepen.io/ohansemmanuel/full/brzJZz/

Ordreegenskaben bruges til at ombestille placeringen af ​​flex-genstande.

Alle flex-genstande i en container vises i stigende ordreværdier. Flex-elementet med de laveste orden vises først.

Alle flex-elementer har en standardordreværdi på 0.

Holy Grail Layout (en anden løsning)

Den foregående opløsning anvendte en flex-container som den samlede beholder. Layouten er meget afhængig af Flexbox.

Lad os se en mere "fornuftig" tilgang. Se igen på det antatte slutresultat:

Den hellige grallayout

header og sidefod kunne behandles som blokelementer. Uden indgreb vil de udfylde bredden på det indeholdende element og stables ovenfra og ned.


  
Sidehoved        
Artikel     

Med denne fremgangsmåde ville den eneste fleksible beholder være den vigtigste.

Den enestående udfordring med denne tilgang er, at du selv skal beregne højden af ​​main. main skal udfylde den tilgængelige plads udover det plads, der er taget af header og sidefod.

vigtigste {
  højde: beregnet (100vh - 40vh);
}

Overvej kodeblokken ovenfor. Den bruger CSS calc-funktionen til at beregne hovedets højde.

Uanset hvilken kilometertal, hovedhøjden skal være lig med beregnet (100vh - højde på overskrift - sidefodshøjde).

Som i den forrige løsning skal du have givet header og sidefod en fast højde. Gå derefter videre og behandl primært på samme måde som i den forrige løsning.

Du kan se de faktiske resultater her.

2 kolonnes webstedlayouts

To søjlelayouter er temmelig almindelige. De opnås også let ved hjælp af Flexbox.

2 søjlelayout med en sidebjælke og hovedindholdsområde.

Overvej markeringen nedenfor:


   sidebjælke 
   main 

Start Flexbox-formateringskonteksten:

krop {
  display: flex;
}

Giv en fast bredde til side:

til side {
   bredde: 20vw
}

Endelig skal du sikre dig, at hovedfylder den resterende tilgængelige plads:

vigtigste {
  flex: 1
}

Det er stort set alt, hvad der er dertil.

Eksempel 5: Medieobjekter med Flexbox

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

Eksempel på Tweet og Facebook-indlæg

Overvej markeringen nedenfor:

     
    

Header

    

  

Som du har gætt, opretter .media Flexbox-formateringskonteksten:

.media {
   display: flex
}

Som standard strækkes flex-genstande i en container langs lodret for at udfylde den tilgængelige højde i flex-containeren.

Sørg for, at .media-kroppen optager al den resterende ledige plads:

.media-body {
   flex: 1
}
Boksen til venstre strækker sig for at passe til den tilgængelige skærm. Mediekroppen optager det resterende vandrette rum i medieobjektet (hvidt)

Lad os fikse den strakte boks.

.media {
  ...
  align-items: flex-start
}
Flex-emnerne er nu justeret til starten af ​​medieobjektet. Billedet tager det nu som standardstørrelse. Ingen underlige strækninger :)

Og det er det.

Et flippet medieobjekt

Et flippet medieobjekt har billedet på den anden side (højre) af medieobjektet

Du har ikke ændringen i html-kilderækkefølgen for at oprette et flippet medieobjekt.

Bestil bare flex-emnerne sådan:

.media-object {
   ordre: 1
}

Dette vises med billedet efter .media-body og media-overskrift

Et nestet medieobjekt

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

     
    

Header

    

              

         
        

Header

        

         

  

Det virker!

Medieobjekter indlejret i medieobjekter.

Et Unicode-medieobjekt

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

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

  
& # x1F60E;
  
    

Header

    

  

Jeg har hængt ind i en emoji der.

Medieobjekt med emoji-support.

Hvis du fjerner img og erstatter den med en div, der indeholder den ønskede unicode, får du output herover. Du kan få fat i nogle flere emoji-unikoder her.

Et HTML-enhedsmedieobjekt

Du har muligvis også brugt html-enheder, som det ses nedenfor.

  
& telefon;
  
    

Header

    

  

HTML-enheden, der bruges i dette eksempel, er & telefon; og du kan se resultatet nedenfor.

html-enhed & telefon;

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 form eller to i disse dage.

formindgange vedhæftet og tilføjet med andre elementer

Overvej markeringen nedenfor:

                    

Dette eksempel viser kombinationen af ​​justering af indtastningsfelter med knapper eller tekstspænd. Opløsningen igen er ret nem med Flexbox.

Start Flexbox-formateringskonteksten:

.form {
  display: flex
}

Sørg for, at inputfeltet optager den tilgængelige plads:

.form__field {
   flex: 1
}

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

.form__item {
  ...
}

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

Eksempel 7: Sådan oprettes en mobilapplayout med Flexbox

I dette eksempel vil jeg føre dig frem til processen med mobilapplayoutet nedenfor:

Mobilapplayoutet vi bygger med Flexbox

Dette eksempel er imidlertid anderledes.

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

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

Trin 1

Fjern layoutet fra iPhone, og vi har dette:

Barebones layout

Trin 2

Definer det indeholdende organ som en flex-container

Start Flexbox-formateringskonteksten som en flexcontainer.

Trin 3

Som standard er flex-retningen for en flex-container indstillet til række. I dette tilfælde skal du ændre det til kolonne.

Skift standard flexretning for at have 3 underordnede elementer, dvs. flex-elementer

Trin 4

Giv punkt 1 og 3 faste højder såsom højde: 50px.

Trin 5

Element 2 skal have en højde, der udfylder den tilgængelige plads. Brug flex-grow eller flex shorthand flex: 1.

Trin 6

Endelig skal du behandle hver blok af indhold som et medieobjekt, som det ses i et tidligere eksempel.

Behandl indholdsblokkene som medieobjekter.

Følg de seks trin ovenfor for at kunne opbygge mobilapplayoutet med succes.

Vil du blive Pro?

Download mit gratis CSS Grid snyderi, og få også to interaktive Flexbox-kurser af kvalitet gratis!

Få gratis CSS Grid Cheat ark + To kvalitets Flexbox-kurser gratis!

Hent dem nu