La meg si dette først: flexbox er enkelt. Enten det er på grunn av tidlig vedtaksproblemer, eller fordi vi har lært å tenke når det gjelder flyter og blokker, hører jeg ofte fra webdesignere at de tror Flexbox er komplisert å implementere. Men jeg gjentar: flexbox er enkelt.
Det er ett triks å forstå flexbox som jeg skal lære deg, og etter alt vil det være klart. Men først vil jeg snakke om hva flexbox er.
Flexbox (eller Fleksibel Box Layout Module for å gi det sitt riktige navn) er et sett med CSS egenskaper som kombinerer for å legge ut innhold på en responsiv måte.
Flexbox er den første CSS layout teknikken som fungerer for den moderne web. Det er rettferdig å si det til fleksbox ble støttet, det var ingen oppsettteknikk som fungerte bra med responsivt webdesign.
Massevis av hack har vært flytende rundt, som å sette inn elementer som skal vises: inline-blokk og la dem vikle seg. Men dette presenterte en rekke problemer for fleksible nettsteder, ikke minst mangelen på kontroll og påslagningsvirkningen av elementene resizing. Av denne grunn bruker mange lydhørlige nettsteder fremdeles JavaScript for å plassere innhold.
Flexboks er beskrevet av W3C som ment å legge ut UI-elementer - ting som menyelementer - det er ikke ment å legge ut hele sider.
Grunnen til at den ikke er ment for layout ut hele sider, er at flexbox har en companion CSS-modul, den Grid Layout Module som er beregnet på layout. Grid Layout anses å være den mest hensiktsmessige teknikken for fulle sidelayouter. Dessverre er det svært begrenset støtte for rutenett for tiden, og med 'begrenset' mener jeg 'ingen'. Selv den nyeste versjonen av Chrome mislykkes i å støtte den uten flagg.
Heldigvis er nettleserstøtte for flexbox mye mer omfattende. Og fordi det løser så mange moderne layoutproblemer, er flexbox et ideelt verktøy til gridet endelig er vedtatt.
Flexbox er ideell for styling av komponenter på en side. Den virkelige kraften til flexbox, og årsaken til at den fungerer så mye bedre enn andre layoutalternativer, kommer fra å erklære stiler på grupper av elementer i stedet for individuelle elementer.
Når det gjelder layout, trenger vi sjelden å plassere et enkelt element - hvis vi planlegger å gjøre det, er det mye bedre å bruke posisjonering. Flexbox fungerer best når det styrer hvordan grupper av elementer relaterer seg til hverandre.
Alltid utforme ting ved å vurdere det i sin neste større sammenheng - en stol i et rom, et rom i et hus, et hus i et miljø, et miljø i en byplan. - Eliel Saarinen
Som sådan er flexbox-spesifikasjonen delt inn i to deler, et sett med egenskaper som refererer til beholderelementet, og et sett med egenskaper som refererer til elementene i.
Nettleserstøtte er vanligvis et komplekst spørsmål. Gjorde det mer komplekse for flexbox fordi flexbox har flere forskjellige syntakser. Tidlig ubesluttsomhet, uavhengig utvikling av noen nettleserleverandører og en iterativ prosess, har gitt oss flere forskjellige versjoner av flexbox som alle trenger å bli tatt vare på.
Heldigvis, med tillegg av noen nettleserprefikser for eldre nettlesere, kan vi nå stole på det. I følge caniuse.com , av de nåværende vanlige nettleserne bare IE9 vil presentere et problem for oss.
Heldigvis, som alle CSS, hvis flexbox mislykkes, svikter det stille. Det betyr at IE9 bare vil ignorere det.
Takket være en svimlende mangel på samarbeid mellom ulike grener av komiteer og selskaper, har flexbox implementering nesten rivalisert kaoset fra de tidlige 00-tallet da hver enkelt nettleser implementerte hver enkelt eiendom unikt og feilaktig samtidig. Flexboxs tre implementeringer var helt enkelt en iterativ tilnærming som har resultert i den mest nyttige vanlige løsningen.
Det er tre versjoner av flexbox-syntaksen som du må være oppmerksom på: gammelt, mellom og nytt. Ulike nettlesere støtter forskjellige syntakser, for eksempel støtter IE10 den mellomliggende syntaksen.
På samme måte som nettleserprefikser skriver vi Flexbox-syntaks fra eldste til nyeste, slik at den nyeste støttede syntaksen overstyrer de eldre syntaksen.
For eksempel skriver vi skjerm: flex slik:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/For klarhetens skyld kommer jeg ikke til å dykke inn i de eldre syntaksene, eller diskutere fordelene til forprosessorer, postprosessorer og forskjellige konverteringsskript. I alle mine eksempler skal jeg bruke den riktige, nye syntaksen.
Når det gjelder produksjonskode, bruker jeg en serie Sass mixins for å utvide flexbox-støtte til eldre nettlesere.
Det er et utmerket Sass mixin her , som du enten kan bruke for å forhindre at kodeoppblåsingen din utvides, eller utvide arvenes syntaks.
Hemmeligheten til flexbox er at det ikke er en boks i det hele tatt. Hittil har alle layout på nettet brukt et kartesisk system med x og y for å plotte poeng. Flexbox, derimot, er en vektor.
Høres bra ut, ikke sant? Flexbox er en vektor, som betyr at vi definerer en lengde og vi definerer en vinkel. Vi kan endre vinkelen uten å påvirke lengden; og vi kan endre lengden uten å påvirke vinkelen.
Denne nye tilnærmingen betyr at noen av flexboxens terminologi er opprinnelig komplekse. For eksempel, når vi justerer elementer til toppen av en flexbeholder, bruker vi flex-start, ikke topp- fordi hvis vi endrer orienteringen, vil fleks-start fortsatt gjelde, men topp vil ikke.
Når du forstår denne tilnærmingen, blir mye av flexboxen demystified.
Flexboks syntaks er delt inn i to grupper: de egenskapene som styrer beholderen, og de egenskapene som styrer beholderens direkte etterkommere. Den tidligere er den mest nyttige, så la oss starte der.
La oss si at vi ønsker å plassere elementer i en blokk. Vi vil ha dem fordelt jevnt. Ved hjelp av flexbox er det veldig enkelt å gjøre. Det første vi trenger er noe oppslag for å prøve dette ut på:
Flexbox Layout Det er en enkel HTML-side , med et hus div, som inneholder fem rom divs som hver har en klasse som identifiserer sin funksjon, kjøkken, vaskerom, stue og soverom.
Det vi skal gjøre er at huset skal være en flexboxbeholder. Eventuelle flexbox egenskaper vi satt på huset vil da bli brukt på sine barn ( rommet s).
For å opprette rommet s må vi først deklarere huset som en fleksboxbeholder, og så fortell hvordan vi ønsker at barnelementene skal ordnes.
For å erklære huset som en flexboxbeholder bruker vi følgende kode:
.house {background:#FF5651;display:flex;}Og det er det. Vi har opprettet en fleksibel boks. Alt vi trenger å gjøre nå, er å fortelle flexbox hvordan du lager rommet s. Vi kan gjøre det ved å bruke egenskapen til rettferdig innhold .
rettferdiggjøre innholdet har fem mulige verdier: senter, flex-start, flex-end, mellomrom og mellomrom. Disse senterer elementene, justerer dem til starten (som er enten øverst eller venstre, som vi vil diskutere nedenfor), slutten (som er enten nederst eller høyre), plasserer dem med like plass rundt hvert element, eller med lik linje mellom hvert element, henholdsvis.
Vi bruker plass-rundt:
.house {background:#FF5651;display:flex;justify-content: space-around;}Her er en demonstrasjon . Legg merke til hvordan det er dobbelt mellomrom mellom elementene som det er på de to ytre kantene? Det er fordi hvert element har samme plass til venstre og til høyre. Hvis vi hadde brukt plass mellom i stedet, ville det ikke være plass på kantene.
Jeg er ikke sikker på deg, men vaskerommet i huset mitt er litt mindre enn salongen, og selv om jeg har et lite kjøkken, vil jeg elske en mye større en. Så la oss gjøre noen tilføyelser til vår kode for å gjenspeile det:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Som du kan se i dette eksempelet , rommene er fortsatt jevnt fordelt. Selv om vi har endret størrelsen. Flexbox er strålende for å organisere innhold.
Som vi diskutert ovenfor, er en av grunnene til at flexbox fungerer så bra for designere at den er beskrevet som en vektor. I dag støtter flexbox bare fire vinkler: 0, 90, 180 og 270 grader. Så det er mye enklere å tenke på dem som en akse.
For å endre aksen bruker vi egenskapen Flex-retning , som har fire mulige verdier: rad (standard - som du kan se i eksemplene ovenfor, er rommene lagt ut fra venstre til høyre), rad-bakover, kolonne og kolonne-revers.
Hvis vi endrer flex-retningen til kolonne, vil du se i denne demonstrasjonen at rommene nå er lagt vertikalt, topp til bunn:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Som jeg er sikker på, kan du gjette, omvendt og kolonne-omvendt, omvendt rekkefølgen av elementene i din flexbeholder.
Du vil merke i det siste eksemplet at mens huset strekker seg helt over visningsporten, strekker den seg til full høyde, selv når den er satt til bøyningsretning: kolonne.
For å kunne leke pent med CSS 'kartesianbaserte koordinatsystem, behandles flexboxbeholderen som et blokknivåelement.
På samme måte som skjermen: Blokken har en følgesvenn : Inline-blokk, så å vise: Flex har display: Inline-Flex.
inline-flex er for tiden mest nyttig hvis du slipper flexbox-elementer inn i et eksisterende layout, og du trenger det til å leke fint med flyter og posisjonerte elementer.
Som vi har sett, har Flexbox ikke noe imot om det ligger horisontalt eller vertikalt, uansett hvilken retning du velger, anses å være flexboxens primære akse.
Men flexbox lar oss også styre posisjonen langs motsatt, sekundær akse.
Posisjon på den sekundære aksen styres av egenskapene for justeringselementene ; den har fem mulige verdier: baseline, senter, flex-end, flex-start og stretch.
Baseline vil normalt være det mest nyttige alternativet. Det sikrer at grunnlinjene for tekstlinjen er oppe. For å teste dette må vi gjøre noen endringer i HTML-filen vår:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomDu får se at jeg har lagt til litt tekst, og importert, og deretter brukt en Google-skrifttype. Jeg har også endret skriftstørrelsen i kjøkken og vaskerom, så det er et klart skille.
Når vi angir egenskapene for justeringselementene til grunnlinjen , vil du se i denne demonstrasjonen at grunnlinjen for teksten stemmer overens.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}justeringselementer: midtpunktet justeres enten vertikalt (hvis bøyningsretning: rad eller bøyningsretning: rad-bakover ) eller horisontalt (hvis bøyningsretning: kolonne eller bøyningsretning: kolonne-bakover ). Her er en demonstrasjon.
justeringselementer: flex-start justeres til toppen og justeringselementer: flex-end justerer seg til bunnen (hvis bøyningsretning: rad eller bøyningsretning: rad-bakover ), eller til venstre og høyre (hvis bøyningsretning: kolonne eller bøyningsretning: kolonne-bakover ). Her er en demonstrasjon.
strekke, er et annet svært nyttig alternativ. strekk vil endre størrelsen på elementene, slik at hver enkelt er i samme høyde (de vil vokse, ikke krympe). Her er en demonstrasjon.
I våre andre eksempler har vi eksplisitt angitt høyden på elementene, som er nok til å overstyre flexbox, slik at du kan se justeringselementer: strekk arbeidet riktig, du må fjerne høyden fra alle klassene unntatt en.
Så langt har vi brukt flexbox til layoutelementer slik at de endres på tvers av plassen, men hva skjer når innholdet i elementene er for stort til å passe på en linje?
For å demo dette, skal jeg øke størrelsen på rommene mine:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomher er hvordan det ser ut nå.
Hvis du krymper ned nettleservinduet, ser du at innholdet blir avskåret, da det ikke er plass til det. Heldigvis definerer flexbox en flex-wrap- egenskap for bare denne eventualiteten, som har tre mulige verdier: no-wrap (standard), wrap og wrap-reverse.
wrap forårsaker noen gjenstander som vil strekke seg utover beholderen for å vikle inn på en etterfølgende linje, akkurat som en tekstlinje.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Hvis du klemmer ned nettleseren din, vil du se i denne demonstrasjonen elementene brytes nå på nye linjer. Legg merke til hvordan justeringselementene: baseline- egenskapen fortsatt brukes? Flexbox s ekte kraft er i å kombinere sine egenskaper.
Et viktig konsept, som jeg vil dekke senere, er at flex-wrap: wrap-revers reverserer ikke rekkefølgen av elementene, det forårsaker noen gjenstander som vil strekke seg utover beholderen for å vikle inn på en tidligere linje, som sett i denne demonstrasjonen .
Som mange CSS-egenskaper har noen flexbox-egenskaper korte versjoner som implementeres mer konsekvent av nettleserprodusenter.
Flex-flow- egenskapen er stenografi for bøyningsretning og bøyningsegenskaper . Så i stedet for å skrive:
flex-direction:row-reverse;flex-wrap:wrap;Vi kan bruke shorthand:
flex-flow:row-reverse wrap;Over brukte vi justeringselementegenskapen til å justere elementer til basislinjen, posisjonen og strekkelementene. Som du kan se i det siste eksemplet, er det fortsatt skjer, men det skjer på linjebasis.
Når elementene våre er pakket inn, har vi muligheten til å angi hvordan de skal legges ut på sekundærakselen hvis beholderen er større enn nødvendig.
Hvis vi setter minhøyden til huset vårt til 1200px, er vår layout ser slik ut .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Vi kan nå bruke justeringsinnholdsegenskapen til å legge ut elementene over hele sekundæraksen.
Justeringsinnholdet har seks innstillinger: senter, flex-end, flex-start, mellomrom, mellomrom og strekk. Disse verdiene gir de samme resultatene som andre steder: sentrering, justering til den ene enden, avstand jevnt eller strekk.
Her er en demonstrasjon med eiendommen satt til mellomrom.
Inntil nå har alle egenskapene vi har sett på blitt satt på containerelementet. For å finjustere elementer gir flexbox oss også en rekke egenskaper som kan settes på enkelte elementer.
For å avklare dette, la oss fjerne noen av kodene våre:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomher er hvordan det ser ut.
Den første flexbox-objektegenskapen er den forvirrende navnet Flex- egenskapen. flex er en verdi av displayegenskapen på beholderen, men det er også en egen eiendom.
Flexegenskapen er shorthand for flex-grow, flex-shrink og flex-basis egenskaper. Rollen til disse egenskapene er å strekke eller squash innholdets størrelse slik at den fyller rommet helt.
Flex-grow- eiendommen forteller de elementene de kan forstørre, om nødvendig, slik at elementene fyller bredden (for bøyningsretning: rad ) og høyden (for bøyningsretning: kolonne ) fullt.
Flex-grow eiendommen tar et forhold. Så hvis vi setter flex-grow- egenskapen til 1, vil alle våre varer være i samme størrelse som Du kan se her .
.room {background:#00AAF2;height:90px;flex-grow:1;}I tillegg til å ha samme størrelse, kan vi også angi forskjellige forhold. Jeg vil fortsatt at kjøkkenet mitt skal være større enn vaskerommet mitt, så la oss fikse det i denne demonstrasjonen .
.kitchen {height:300px;flex-grow:2;}flex-krympe fungerer nøyaktig det samme som flex-grow, bortsett fra at det krymper varen hvis nødvendig, i stedet for å utvide den.
Hvis du endrer størrelsen på nettleseren, vil du se at kjøkkenet i forskjellige størrelser, er ikke akkurat det dobbelte av bredden på det andre rommet s. Det skyldes fleksibilitetsegenskapen .
flex-basis bestemmer hvordan flex-grow og flex-shrink egenskaper beregnes. Den har 2 verdier: auto (standard) og 0.
Hvis den er satt til 0, tas hele elementet i betraktning. Hvis det er satt til auto , er det polstring rundt elementets innhold som er endret. Med andre ord ignorerer 0 størrelsen på elementets innhold ved beregning, og automatisk tar det hensyn til det. Det er en Hendig diagram levert av W3C som forklarer dette.
Her er en demonstrasjon av hva som skjer når jeg setter flex-basis: 0 på eksempelet ovenfor.
flex-basis: 0 er spesielt nyttig hvis du vil plassere elementer jevnt, uavhengig av innholdet.
Som nevnt ovenfor er Flex- eiendommen en stenografi for disse egenskapene, og du finner det som den mest pålitelige måten å sette disse verdiene på.
Ordren av verdier er flex-grow, flex-shrink, flex-basis. Så, for å sette en vekstverdi på 2, en krympeverdi på 1 og et grunnlag på 0, vil du bruke:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}En av de beste funksjonene til flexbox er evnen til å endre rekkefølgen på elementer, uten å påvirke markeringen; Dette er spesielt nyttig for tilgjengelighet, da det gir oss mulighet til å kode opp merket riktig, og så vise det optimalt.
For å gjøre dette bruker vi varens bestillingsegenskap .
Når vi ser på vårt eksempel, er vaskerommet rett ved siden av kjøkkenet. Jeg vil heller det var ved siden av soverommene, så jeg kan hoppe rett inn i dusjen om morgenen, så la oss flytte den. Det er for øyeblikket det andre elementet, vi vil at det skal være det tredje. Så vi setter sin ordre eiendom tilsvarende i denne demonstrasjonen .
.washroom {height:60px;order:2;}Se hvordan det hoppet helt til slutten av raden? Det er ved siden av soverommene, men ikke hvordan vi tenkte. Dette er en stor gotcha i flexbox, fordi mange utviklere (meg selv inkludert) forventer at bestillingen skal fungere som en matrise.
ordre fungerer egentlig som CSS ' z-indeks, noe som betyr at hvis du ikke eksplisitt angir en ordre for et element, antas det å være lavere i ordren enn et element som en verdi er uttrykkelig angitt for.
Vi vil at vaskerommet skal bytte med salongen, så i denne demonstrasjonen De eneste andre elementene som trenger en bestilling er soverommet s.
.washroom {height:60px;order:2;}.bedroom {order:3;}Legg merke til hvordan begge soverom s har samme bestillingsnummer? I slike tilfeller vil nettleseren komme tilbake på DOM-bestillingen.
Den endelige gjenstanden er selvjustert. Det brukes til å endre elementets justering på sekundæraksen. Justeringselementer brukes til å justere alle elementene, og denne egenskapen gir deg muligheten til å fravælge den aktuelle innstillingene.
Det tar de samme fem verdiene som den tilsvarende egenskapen på beholderen: Baseline, Center, Flex-end, Flex-Start og Stretch.
Her er en demonstrasjon av vaskerommet re-aligned.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox er et kraftig alternativ for å legge ut innhold. Selv om det ikke er ment å legge ut hele sider, gir den overlegne støtten til Grid Layout det et godt alternativ, spesielt for mobile første nettsteder.
For å demonstrere skal vi sette sammen en enkel side som bruker noen av teknikkene beskrevet ovenfor.
Først opp er vårt oppslag, og noen grunnleggende stiler for siden.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Som du kan se , Jeg har en div med id- siden. På siden har jeg en uordnet liste over nyhetsartikler. Etter nyhetsartikler har jeg overskriften, som ligger under nyhetsinnholdet til fordel for tilgjengelighet. Til slutt har jeg en bunntekst.
Det første jeg vil gjøre er å flytte overskriften opp til toppen av siden. For å gjøre det, vil vi sette siden til en flexboxbeholder. Da setter vi retningen til kolonne. Deretter tilordnes en ordre til hver av sidens barnelementer.
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Det neste trinnet er å legge ut overskriften. Barnelementer i flexboxbeholdere kan være flexboxbeholdere i sin egen rett, så vi kan bruke flexbox til jevnt å plassere toppelementene.
La oss sette toppteksten for å være en flexboxbeholder, så la oss plassere innholdet jevnt, uten ekstra polstring på sidene, og til slutt la oss sørge for at menyelementene er på samme basislinje som logoen.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Våre nyhetsartikler skal være plassholdere for kjente historier, så de må være en betydelig størrelse for å få plass til tekst, og et bilde eller en video. Så vi trenger dem til å vikle.
La oss sette nyhetsdivisjonen som en flexboxbeholder. Deretter la oss gi nyhetsbrevet noen minimumsdimensjoner og litt farge slik at vi kan se dem tydelig.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Nå må vi sette nyhetsbeholderen inn i wrap, og newsItem s skal utvide for å fylle ledig plass.
#news {order:2;display:flex;flex-flow:row wrap;}Utfordringen vi har nå er at når newsItem s ikke er jevnt fordelt, er det største elementet (G) nederst. På de fleste nettsteder vil vi gi den største mengden plass til det øverste innholdet. Vi kan fikse dette ved å sette omslaget til omslag.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Det bestiller elementene, men leser fra øverst til venstre, de er nå ute av drift. Så vi må reversere rekkefølgen, ved å sette retningen mot bakover.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Som plasserer elementene i rekkefølge, leser venstre til høyre, topp til bunn; med de større gjenstandene alltid øverst. Men jeg ønsker ikke å måtte endre rekkefølgen av historier i min markering for å tvinge element A til å komme før element B. Så det siste jeg må gjøre er å endre rekkefølgen på elementene.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Det siste elementet som skal styles er bunnteksten. Vi ønsker å legge det ut, akkurat som overskriften, men fordi bunnteksten bare har tre barns elementer (i forhold til topptekstens fire), skal vi sette avsnittet to ganger så bredt som logoen, og listen .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Det fungerer bra på skrivebordsstørrelser, men krymp ned nettleseren din og du vil se at den er for trang på små enheter. Så la oss endre koden slik at den er lagt ut som kolonner under 600px, og vender tilbake til en rad over 600px.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}Og der har du det. En moderne tilnærming til å legge ut innhold på en nettside, som er bredt støttet og enkelt å implementere.
Kraften til flexbox er at egenskapene kan kombineres for å gi oss presis kontroll over våre layouter, med den enkleste mulige syntaxen.