Innhold
- Neste generasjons design
- Fleksjonselementer
- Rader og kolonner
- Senter gjenstander
- Tverraksen
- Begrunn langs hovedaksen
- Juster flere linjer
- Fyll ut rommet
- Vokser og krymper
- Ukjent navigasjonsstørrelse
- Kolonner med like høyde
- Fordeler med Flexbox
- Må ha ressurser
Har du begynt å bruke Flexible Box Layout-modulen i prosjektene dine enda? Selv om modulen har eksistert i noen tid, har det vært to store barrierer som hindrer frontend-utviklere fra å bruke den som et webdesignverktøy.
Først inntil nylig var spesifikasjonen i flyt, og det var ikke stor støtte for det. I dag støtter alle moderne nettlesere Flexbox. Den andre barrieren er at det er ganske vanskelig å forstå begrepet Flexbox. Selv om den er superkraftig, er det mange bevegelige deler, og det kan være vanskelig å lære. Men muligheten til å ordne sideelementer, og få dem til å oppføre seg på en forutsigbar måte, på tvers av flere skjermstørrelser, er vel verdt innsatsen.
I denne artikkelen vil jeg få deg i gang med de grunnleggende konseptene bak flexbox. Å forstå disse kjernekonseptene vil åpne for en hel verden med ekstremt fleksible, enkle å lage oppsett (spesielt for responsivt webdesign).
Neste generasjons design
Flexbox er et neste generasjons verktøy som hjelper deg med å lage oppsett med CSS; om du vil legge ut en del av nettstedet ditt eller vise et rutenett av medieelementer. Det lar deg enkelt justere, sentrere, rettferdiggjøre, skalere og omorganisere elementer på siden din uten å måtte ty til ekle CSS-hacks eller skjøre JavaScript-avhengigheter.
Flexbox kan erstatte flottører, posisjoneringstriks, innebygde blokkeringsoppsett og til og med - rystelse - bordvisningsoppsett. Hvis du noen gang har trukket håret ditt og lurer på hvorfor noen tilsynelatende enkle oppsett var vanskelige eller til og med umulige i CSS, kommer du til å elske Flexbox.
Fleksjonselementer
Magien til Flexbox er i forholdet mellom foreldrenes flexcontainer og barnas flexartikler. For å ta full kontroll over Flexbox, må du legge til side tidligere ideer om flyter, posisjonering og rydding. Dette er en helt ny måte å legge ut siden din.
Omgivelser skjerm: flex; på et foreldreelement gjør det til en flexcontainer, og alle sine nærmeste barn vil bli omgjort til flexartikler. Når du har satt opp markeringen din, kan du bruke en av de mange tilgjengelige fleksegenskapene til å lage en layout.
Merk: hvilket som helst av HTML-elementene kan være en flexcontainer eller flex-element. Noen :før og :etter pseudo-elementer du har på flexcontaineren din blir behandlet som barn, og derfor førsteklasses flexartikler.
Rader og kolonner
Det er to akser i Flexbox som styrer hvordan flex-elementene på siden er lagt ut: hovedaksen og tverraksen. Som standard er Flexbox satt opp slik at hovedaksen går fra venstre til høyre (eller det motsatte, for språk som leser høyre mot venstre) og tverraksen flyter fra topp til bunn (vist ovenfor). Før du husker det, må du merke at dette kan - og vil - alt endres med flex-retning eiendom.
Som standard er Flexbox satt opp med flex-retning: rad; som betyr at elementene flyter på hovedaksen fra venstre til høyre, på rad. Vi kan bytte hovedaksen slik at den flyter fra høyre mot venstre ved å bruke flex-retning: rad-revers (som vist ovenfor).
For å bytte både hovedaksen og kryssaksen, endrer vi oppsettet til flex-retning: kolonne;. Dette vil endre hovedaksen og bøye elementstrømmen fra venstre til høyre til topp til bunn, i en kolonne (over). Vi kan også starte fra bunnen og bevege oss opp ved å snu hovedaksen med flex-retning: kolonne-revers.
Senter gjenstander
En av de beste tingene med Flexbox er at den lar deg justere innholdet ditt slik du vil - selv vertikal sentrering er en absolutt bris! Det er ofte forvirring rundt Flexbox-justering, fordi det er tre forskjellige egenskaper som vi bruker for å endre justeringen av flex-elementene våre.
En grunn til dette er at disse egenskapene justerer elementene langs hoved- og tverraksen. Så i stedet for å spørre, 'hvordan sentrerer jeg noe vertikalt eller horisontalt?', Må du først fastslå hvilken retning aksene dine peker, og deretter finne ut hvilken CSS-egenskap du skal bruke for å rette inn og sentrere fleksobjektene på dem.
I de neste eksemplene vil jeg prøve å midtstille varene mine. Du bør imidlertid vite at hver av disse egenskapene har en rekke justeringsalternativer. For en fullstendig liste, anbefaler jeg at du holder denne CSS-Tricks flexbox-referansen praktisk.
Tverraksen
Som standard strekker flex-elementer seg over hele flexcontaineren langs tverraksen. Hvis vi vil sentrere gjenstander langs tverraksen, kan vi bruke justere-elementer eiendom på flexcontaineren vår og sett den til senter (Vist ovenfor).
I tillegg til tøye ut og senter, kan vi også bruke flex-start og flex-end for å forankre elementene på henholdsvis topp og bunn. Til slutt har vi grunnlinje, som vil justere elementene langs bunnen (eller grunnlinjen) i teksten din. Dette er ekstremt nyttig når du prøver å justere elementer med forskjellige skriftstørrelser.
Begrunn langs hovedaksen
Nå har vi sentrering som fungerer langs tverraksen - fra topp til bunn i vårt tilfelle - vi trenger å få sentrering til å fungere over hovedaksen. For dette bruker vi rettferdiggjøre innhold: sentrum (Vist ovenfor).
Akkurat som med justere-elementer, kan vi også bruke flex-start eller flex-end, i tillegg til mellomrom og space-around, som jevnt vil fordele det gjenværende rommet mellom elementene. Dette er veldig nyttig når du arbeider med rutenettoppsett som ikke utgjør opptil 100 prosent av marginen og bredden.
Bare husk, hvis vi bytter fra standard flex-retning: rad; til flex-retning: kolonne;, kan hovedaksen skifte fra venstre til høyre til topp til bunn. Når vi bytter til kolonne, blir justeringselementer den horisontale justeringen mens rettferdiggjør innhold blir den vertikale justeringen.
Juster flere linjer
Samtidig som justere-elementer og rettferdiggjøre innhold fungerer bra når du har en enkelt rad eller kolonne med innhold, ting blir litt vanskeligere når du har å gjøre med flere linjer med innhold som et resultat av å bruke flex-wrap: wrap; på flexbeholderen.
juster innhold fungerer akkurat som rettferdiggjøre innhold, men sparker inn når vi har flere innholdslinjer. Ved å søke align-content: sentrum; vi kan sikre at linjene vil forankres midt på tverraksen og sentrere elementene derfra.
Akkurat som med rettferdiggjøre innhold, kan vi også bruke flex-start, flex-end, mellomrom og space-around. Denne gangen refererer de imidlertid til mellomrommet mellom innholdsradene eller kolonnene, og ikke selve flex-elementene.
Nå, med bare fire linjer CSS, har vi en skuddsikker måte å sentrere alle direkte barn i en flexcontainer vertikalt og horisontalt.
.container {align-items: center; rettferdiggjøre innhold: sentrum; align-content: sentrum; flex-wrap: wrap; }
Fyll ut rommet
Så langt har alt vi har lært om justering å gjøre med flexcontaineren og hvordan den justerer barna sine. Med align-self er det mulig å overstyre justere-elementer egenskap som er satt på flexcontaineren ved individuell innstilling align-self til flex-start, flex-end, senter, grunnlinje eller tøye ut.
En annen ofte misforstått del av flexbox er hvordan man kan arbeide med vekst, krymping og basisverdier. Det er nyttig å igjen kaste ideer om piksel-perfekte rutenett og omfavne at flexbox er vel, fleksibel.
Hver flex-vare kan tildeles a flex-grow, flex-krympe og en flex-basis verdi. Med disse verdiene kan vi indikere våre ideelle størrelser, og deretter spesifisere hvordan elementene skal fungere i situasjoner der det er ekstra, eller ikke nok, plass. Derfra vil varene bare finne ut av det selv.
Jeg liker å tenke på disse egenskapene som:
- flex-grow: Hvordan handler jeg når det er ekstra plass tilgjengelig? Hvordan vil flex-elementene dele opp gjenværende plass?
- flex-krympe: Hvordan handler jeg når det ikke er nok plass til alle flex-elementene? I stedet for å rømme over containeren, hvem vil gi opp en del av seg selv for å få alt til å passe?
- flex-basis: I stedet for å angi en bestemt bredde eller en høyde på elementet ditt, ideelt sett hvilken bredde (som en rad) eller høyde (som en kolonne) vil det være?
Merk at selv om det er mulig å spesifisere disse egenskapene individuelt, vil du nesten alltid bruke flex shorthand til å spesifisere vokse, krympe og basis verdier på en gang. Sjekk videoene på Flexbox.io for en mer detaljert beskrivelse av egenskapen flex shorthand.
Vokser og krymper
Tanken er at vi kan stille vår ideelle bredde eller høyde med basisverdien, og når det er ekstra plass tilgjengelig for fleks-elementene, flex-grow eiendommen vil bestemme hvor mye ekstra du skal ta opp. På samme måte, når det ikke er nok plass, vil krympegenskapen bestemme hvor mye hvert element vil gi opp (eller 'krympe').
De flex-grow og flex-krympe egenskaper er enhetsfrie, proporsjonale verdier. De beskriver hvor mye - i forhold til alle de andre flex-elementene - varen vil vokse eller krympe.
La oss si at vi har to fleksible elementer: video og kreditter. Vi vil sette videoen til flex: 1 1 700px; og studiepoengene til flex: 3 3 300px;. Nå er foreldrene til begge disse elementene flexcontaineren, og når det er 1000 px bredt, fungerer ting perfekt: videoen tar opp sine 700 px og studiepoengene tar opp de andre 300 px.
Hva skjer når flexcontaineren er 1500 px bred? Vi har 500 px ekstra å jobbe med, så hvor går det? Det er der flex-grow sparker inn. Videoen er satt til 1 mens studiepoeng er satt til 3. Det vil si at alt ekstra rom, kreditter vil ta tre ganger (375px) hvor mye plass videoen får (125px).
Likhet, hva skjer når flexcontaineren vår er mindre enn 1000 px? La oss si at det er 900 piksler: hvordan fungerer videoen og kredittene da? I motsetning til flyter, bryter vi ikke bare inn på en ny linje eller reduserer dem med prosentandeler. I stedet bruker vi flex-krympe eiendom.
Siden studiepoengene har en flex-krympe av 3 og videoen har en flex-krympe av 1, betyr dette at studiepoengene vil gi opp tre ganger så mye plass som videoen. Så siden vi må barbere 100px fra et sted, vil studiepoengene gi opp 75px, mens videokontaineren bare vil gi opp 25px.
Ukjent navigasjonsstørrelse
La oss se på noen vanlige brukstilfeller av flexbox. Hvis du noen gang har jobbet med en navigering i et CMS som WordPress, vil du vite at det kan være vanskelig å forutsi hvor mange elementer som blir inkludert i navigasjonen.
Jevn fordeling av rommet mellom alle elementene krever JavaScript. For eksempel hvis du har tre elementer, skal hver og en ta opp 33,33 prosent av bredden, mens hver med fem elementer skal ta opp 20 prosent.
La oss ta en titt på denne ofte sett koden som et eksempel:
ul> li> a href = "#"> Hjem / a> / li> li> a href = "#"> Om / a> / li> li> a href = "#"> Kontakt / a> / li> / ul>
Med flexbox kan vi enkelt lage denne navigasjonen, og til og med gjøre den responsiv, alt sammen med bare noen få linjer med CSS. Alt vi trenger å gjøre er å sette navigasjonscontaineren vår (vanligvis en ikke-ordnet liste over varer) til display: flex, og deretter hvert av de fleksible elementene til flex: 1 eller flex-grow: 1;.
Dette vil strekke listeelementene horisontalt og passe dem perfekt i tilgjengelig bredde. Årsaken til at dette fungerer så fint er at vi setter flex-elementene til å vokse 1, noe som betyr at når det er ekstra plass til overs, blir det fordelt jevnt mellom alle elementene.
For mer informasjon om dette, og for å lære hvordan du kan tilpasse navigasjonselementene dine annerledes, sørg for å se den responsive navigasjonsveiledningen som er tilgjengelig på Flexbox.io.
Kolonner med like høyde
Har du noen gang ønsket at CSS hadde en høyde: like høy som den høyeste søskenegenskapen? Vi har alle vært der - vi har tre kolonner med innhold, som alle har forskjellige størrelser (ovenfor). Innholdet er dynamisk og nettstedet er responsivt, så det er uaktuelt å sette en fast høyde på hver enkelt, og en JavaScript-løsning er ikke ideell.
Tidligere fikk vi vite at standard for justeringselementer er strekk. Dette betyr at flex-elementene vil strekke seg slik at de passer til foreldre-flexcontaineren. Og hvordan er høyden på flexcontaineren definert? Nesten alltid i høyden på den høyeste innholdsboksen.
La oss ta følgende oppmerking, for eksempel. Hvis vi gjengir dette med flyter og prosentvise bredder, vil vi se at beholderen er dimensjonert av det midterste elementet og de to andre bare er så høye som de trenger å være.
div> div> p> Jeg er kort / p> / div> div> p> Jeg er en ganske høy boks som er den største / p> / div> div> p> Jeg er en mellomstor boks / p > / div> / div>
Nå, hvis vi bare bruker skjerm: flex; på fleksbeholderen, og sett hvert element til å være 33,33 prosent med flex-basis egenskap, strekker flex-elementene seg straks over hele tverraksen, uavhengig av hvor mye innhold som er i dem (se bildet ovenfor).
.container {display: flex; } .boks {flex: 1 1 33,33%; }
Fordeler med Flexbox
Jeg håper du nå ser verdien i å lære hvordan du bruker Flexible Box-modulen. Selv om det ikke løser alle problemer du har med CSS, er det et viktig verktøy hver designer og utvikler bør vite og har i sitt arsenal.
Det har gått en stund siden vi har fått noe så stort til CSS, og jeg vil hevde at det er en av de tøffere delene av CSS å lære. Bare husk at du skjøvet om læring flyter, så Flexbox er helt noe du kan mestre!
Må ha ressurser
Hva Flexbox ?!
‘What the Flexbox ?!’ er et gratis 20-videokurs jeg har laget. I første halvdel av kurset introduserer hver video et nytt aspekt av Flexbox. Jeg har holdt disse fine og korte, slik at du kan referere til dem senere når du trenger å pusse opp en bestemt del. Andre halvdel av kurset dykker inn i et eksempel fra den virkelige verden, og beskriver hvordan vi kan bruke Flexbox til raskt og enkelt å løse mange av de vanlige layoutproblemene vi står overfor.
En komplett guide til Flexbox
Når du har fått tak i Flexbox, kan du legge opplæringsmaterialet til side. Det er imidlertid nyttig å ha en visuell referanse hendig. Denne fantastiske ressursen fra Chris Coyier bryter ned hver av de 13 forskjellige Flexbox-egenskapene, og viser hvilke som gjelder flexcontaineren og som gjelder direkte for flex-elementene.
Flexbugs
Flexbox er ikke uten feil, og som noe annet, det er en håndfull kryss-nettleserfeil og løsninger du bør vite om. Flexbugs skisserer en rekke kjente Flexbox-bugs, i tillegg til mulige løsninger og løsninger.
