Accentsconagua
Her er det første elementet
Her er neste punkt
Det tredje elementet
Det fjerde elementet
Share
Hvis du begynte å skrive CSS for noen år siden, er sjansene for at du har blitt vant til noen få quirks av CSS-oppsett som du har tatt for å være uunngåelig. For eksempel bruker absolutt posisjonerte elementer inne i relativt posisjonerte elementer, eller bruk clearfix i forbindelse med flyter for å oppnå kolonnegitter.
Intuitivt, vi har alle tenkt at det burde være en bedre måte. Tross alt er det litt rart at den beste løsningen for vertikal sentrering har involvert bruk display: table; og tilhørende stiler. Hvorfor skal vi bruke hacks å få grunnleggende ting til å fungere?
De fleksibel boks modul, eller flexbox for kort er den nye løsningen til mange av våre tidligere woes, og passer til en rekke designmønstre som har blitt utbredt. Den grunnleggende ideen bak flexbox er å tillate den inneholdende boksen med elementer å endre størrelse og ombestille disse elementene for å passe best til beholderen på en passende måte.
Flexbox er ikke ment for bruk i hele området. CSS grid-spesifikasjonen er i arbeidene for å løse dette problemet, men dessverre er det fortsatt i en mye mindre støttet tilstand enn flexbox, som i det minste har delvis støtte i alle nettlesere, bortsett fra Opera Mini. I motsetning er CSS-gridspesifikasjonen bare fullt ut støttet av IE, med ukjent eller ingen støtte i alle andre nettlesere.
Flexbox er ment å brukes til diskrete deler av en layout. I denne artikkelen vil vi dekke noen få vanlige oppgaver som kan utføres mer effektivt med flexbox, og forklare syntaksen for hvordan vi oppnår bestemte resultater. For å få en fullverdig oversikt over alle eiendomsalternativene, ta en titt på CSS Tricks-innlegget på flexboks En guide til Flexbox.
Før flexbox var vertikal sentrering av dynamisk innhold en ikke-triviell oppgave. (Se denne smashing Mag-innlegget, så vel som denne CSS-Tricks-artikkelen for hele historien.) Med flexbox har alt blitt enklere. Vi setter opp en grunnbeholder med barnelementer.
Testing av vertikalt senterEn sekundær testTertiær er for tre
Vårt mål er å sentrere disse elementene vertikalt og horisontalt. Med flexbox er det så enkelt som følgende:
.beholder bredde: 500px; høyde: 500px; margin: 0 auto; bakgrunnsfarge: #dedede; / * Flex regler * / display: flex; flex-flow: kolonne nowrap; begrunn-innhold: center; justeringselementer: center;
Merk: at vi ikke bruker leverandørens prefikserte versjoner, men du bør! Alternativt, ta en titt på Autoprefixer.
Du har lagt merke til noen ukjente nye regler som er brukt her; Flexbox er en modul som består av en rekke egenskaper. For å starte, display: flex skaper vår flexboxbeholder og dets barnelementer behandles automatisk som bøyleelementer.
Med mindre annet er oppgitt, vil våre flex-elementer strømme innover langs hovedaksen. derimot, flex-flow (som er stenografi for flex-retningen og flex-wrap egenskaper) kan endre både hoved- og kryssaksene. flex-flow: kolonne nårap forteller flexbox at vi vil at innholdet vises i en vertikal kolonne, og at vi ikke vil at artiklene våre skal vikle (tvinge dem til å hoppe til neste rad).
rettferdig-innhold til senter, som justerer elementene våre til sentrum av hovedaksen, som er basert på retningen definert av flex-flow, i dette tilfellet den vertikale akse. justeringselementer: senter justerer elementene våre i forhold til sekundær ("kryss") akse.
Det er et inneboende problem med en tradisjonell tilnærming til layout, spesielt når det gjelder responsivt innhold. Når du bruker flyter, er det for eksempel lett å se innholdet på en side i en helt annen rekkefølge enn naturlig eller kognitiv. I tillegg er det svært vanskelig å manipulere rekkefølgen av elementer på en side. Med flexbox skal vi takle en av de vanskeligere å oppnå layoutene for tradisjonell CSS; en toppjustert, omvendt bestilt stabling av elementer. Så, med andre ord, elementet som vises først i oppslaget vises siste På skjermen, og legge til nye elementer i bunnen av merket, vil de vises øverst på skjermen.
Vi bruker denne oppmerkningen:
Med følgende CSS kan vi oppnå det vi prøver å gjøre enkelt.
main posisjon: relative; høyde: 100%; display: flex; flex-flow: kolonne-revers nowrap; begrunn-innhold: flex-end; justeringselementer: center;
Dette vil gi oss akkurat det vi satser på. Se resultatene (med noen ekstra stilarter for enklere visning) her.
Ved å lage en kolonne-omvendt på flex-flow, Vi ber fleksbox for å reversere rekkefølgen på elementene. Vi ønsker å justere innholdet til enden av flexbox-tverrsnittet, som i tilfelle av den omvendte kolonnen er en vertikal linje som går fra bunnen av boksen til toppen.
Vi har også satt juster-poster: center å sentrere elementene i kolonnen horisontalt. Dette er nyttig for enhver form for stabling av elementer, hvor den kognitive rekkefølgen (først til siste) ikke stemmer overens med visuell rekkefølge (topp til bunn).
Det er mange situasjoner der du må ombestille elementer basert på skjermstørrelsen. De vanlige løsningene på dette problemet er vanligvis innviklede, eller de gjentar markup. Se på dette eksempelet, hvor vi har flyttet et kjennetegnet bilde fra å være i strømmen av en artikkel til starten av artikkelen ved hjelp av det enkle rekkefølge eiendom. Vi bruker følgende HTML:
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Ipsam eum repudiandae ullam ipsum repellendus officiell eaque unde aut ea porro accusamus placea earum qui quia quidem tilam harum odit voluptates?
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Autem provident voluptas commodi atque. Konsekvensen er ikke et øre, men det er ikke noe som gjør det vanskelig å eksplisitt.
Og den medfølgende CSS:
main display: flex; flex-flow: radomslag; img flex-grow: 1; bredde: 200px; rekkefølge: 3; p flex: 1 auto; rekkefølge: 1; polstring: 10px; bakgrunnsfarge: #dedede; margin: 0; p: nth-child (3) rekkefølge: 2; flex: 3 0 50px; @media bare skjerm og (maksimal bredde: 600px) img rekkefølge: 1; p flex: 1 auto; rekkefølge: 2; polstring: 10px; bakgrunnsfarge: #dedede; margin: 0; p: nth-child (3) rekkefølge: 3; flex: 3 0 50px;
Dette er bare toppen av isfjellet når det kommer til kraften fra flexbox til å gjøre i svært få linjer med kode som er ofte vanskeligere å oppnå.
Hvor mange ganger har du blitt frustrert at 100/3 var umulig å gjøre, og deretter til å skape 99,9% bredde kolonner, bare for å innse hvor dårlig en løsning er? Flexbox løser dette problemet en gang for alle. Ta oppslaget:
testingtestingtesting
Og legg til CSS for å få alle tre kolonnene til å vises, perfekt beregnet.
.beholder display: flex; begrunn-innhold: center; justeringsinnhold: mellomrom mellom; bakgrunnsfarge: #dadada; .column width: 100%; polstring: 50px; tekst-align: center; boks-skygge: 0 0 10px # c0c0c0;
Vil du ha en liten rigg? Ikke noe problem. Bare legg til margin til din .kolonne klasse. Beregningene for riktig avstand er gjort for deg.
Ta en titt på den fantastiske GitHub-repoen "Løst av Flexbox" for flere eksempler. Flexbox er en massivt kraftig modul, som vi håper har blitt bevist gjennom denne artikkelen. Hva er noen andre kraftige og spennende brukstilfeller du ser for flexbox? Gi oss beskjed i kommentarene!
