Flexbox (Flexible Box Layout Module) spesifikasjon er en metode for å plassere elementer i horisontal eller vertikal retning.
Flexbox kombinerer et sett med egenskaper for en overordnet flexbeholder og for underordnede flexvarer.
For at et element skal bli en flexcontainer, må det tildeles display: flex; eller display: inline-flex;(henholdsvis blokk eller linje).
To akser er laget inne i fleksbeholderen: den viktigste og de tverrgående aksene vinkelrett på den. Først justeres flekselementene langs hovedaksen, og deretter langs den tverrgående.
Fleksibeholderegenskaper |
|
| flex-retning | Definerer retningen til hovedaksen. Mulige verdier:
|
| flex-wrap | Bestemmer om beholderen er multi-line. Mulige verdier:
|
| flex-flow | Definerer to parametere samtidig: flex-direction og flex-wrap. For eksempel, flex-flow: column wrap; |
| rettferdiggjøre-innhold | Bestemmer justeringen av elementer langs hovedaksen. Mulige verdier:
|
| align-elementer | Bestemmer innrettingen av elementer langs den tverrgående aksen. Mulige verdier:
|
| align-innhold | Bestemmer kryssaksejusteringen av hele rader med fleksible elementer. Mulige verdier:
Denne egenskapen fungerer ikke for en enkelt linje fleksibel beholder. |
Flex Element Properties |
|
| rekkefølge | Bestemmer rekkefølgen et enkelt flex-element vises i i en flex-beholder. Spesifisert som et heltall. Standard er 0, deretter følger elementene hverandre i en naturlig flytrekkefølge. Betydning rekkefølge spesifiserer vekten av elementets posisjon i sekvensen, i stedet for dets absolutte posisjon. |
| flex-basis | Definerer grunnstørrelsen til en fleksibel vare før du tildeler plass i beholderen. Kan spesifiseres i px, %, em og andre måleenheter. I hovedsak er dette et slags utgangspunkt i forhold til hvilket elementet er strukket eller komprimert. Standardverdi - auto, med størrelsen på elementet avhengig av størrelsen på det interne innholdet. |
| flex-vokse | Bestemmer hvor mye ledig plass inne i beholderen flex-elementet vil legge til grunnstørrelsen. Spesifisert av et heltall som fungerer som en proporsjon. Standard er 0. Hvis alle elementer flex-grow: 1, da vil de alle ha samme størrelse. Hvis du setter ett fleksibelt element til 2, vil det legge til dobbelt så mye til grunnstørrelsen som de andre. |
| flex-krympe | Bestemmer hvor mye, hvis det ikke er nok plass, flexelementet vil krympe i forhold til reduksjonen av naboelementer inne i flexbeholderen. Spesifisert av et heltall som fungerer som en proporsjon. Standard er 1. Hvis ett flexelement er satt til bøyelig krympe: 2, så vil dobbelt så mye trekkes fra grunnstørrelsen som fra andre hvis beholderen er mindre enn summen av grunnstørrelsene til elementene den inneholder. |
| bøye seg | Definerer tre parametere samtidig: flex-grow, flex-shrink, flex-basis. For eksempel, flex: 1 1 200px; |
| innrette seg selv | Overstyrer standardjusteringen eller align-elementer, for et spesifikt flekselement. Mulige verdier:
|
Funksjoner ved bruk av Flexbox i praksis
1. Høyrejustering
Den komplette guiden til CSS Flexbox. Denne komplette guiden forklarer alt om flexbox, med fokus på alle mulige egenskaper for overordnet element (flex container) og underordnede elementer (flex elementer). Den inkluderer også historikk, demoer, maler og en nettleserstøttetabell.
Bakgrunn
flex-flow (gjelder: det overordnede elementet til flex-beholderen)
Dette er en forkortelse for flex-retning Og flex-wrap egenskaper som sammen definerer hoved- og tverraksen til flexcontaineren. Standardverdien er rad nårap.Fleksiflyt:<‘flex-direction’> || <‘flex-wrap’>
rettferdiggjøre-innhold
Denne egenskapen bestemmer justeringen langs hovedaksen. Den hjelper til med å fordele den ekstra gjenværende ledige plassen når alle flex-elementer på rad er ufleksible, eller er fleksible, men har nådd sin maksimale størrelse. Dette gir også en viss kontroll over justeringen av elementer når de flyter over linjen.
Container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-jevnt | start | end | left | right ... + safe | utrygt; )
- flex-start(standard): elementer flyttes til begynnelsen av flex-retningen.
- flex-ende: Elementene flyttes mot slutten av flexretningen.
- start: elementer flyttes til begynnelsen skrivemodus veibeskrivelse.
- slutt: elementer forskyves på slutten skrivemodus veibeskrivelse.
- venstre: elementer flyttes mot venstre kant av beholderen hvis dette ikke gir mening flex-retning, da oppfører han seg som start.
- Ikke sant: elementer flyttes mot høyre kant av beholderen hvis dette ikke gir mening flex-retning, da oppfører han seg som start.
- senter: elementer er sentrert langs linjen
- mellomrom: elementer er jevnt fordelt langs linjen; det første elementet er på begynnelsen av linjen, det siste elementet er på slutten av linjen
- plass rundt: Elementer er jevnt fordelt langs en linje med like stor plass rundt dem. Legg merke til at visuelt sett er mellomrommene ikke like, da alle elementene har samme plass på begge sider. Det første elementet vil ha en romenhet mot kanten av beholderen, men to romenheter mellom det neste elementet, fordi det neste elementet har sin egen avstand som påføres.
- plass-jevnt: Elementene er fordelt slik at avstanden mellom to vilkårlige elementer (og avstanden til kantene) er den samme.
Det er også to ekstra søkeord du kan knytte til disse verdiene: sikker Og utrygt. Bruk sikker sikrer at uansett hvor mye du gjør denne typen posisjonering, vil du ikke kunne plassere elementet slik at det vises utenfor skjermen (som på toppen), slik at innholdet heller ikke kan rulles (dette kalles " tap av data").
align-elementer
Denne egenskapen definerer standardoppførselen til hvordan fleksible elementer legges ut langs kryssaksen på gjeldende linje. Tenk på det som berettig-innhold-versjonen for tverraksen (vinkelrett på hovedaksen).
Container ( juster-elementer: strekke | flex-start | flex-end | center | baseline | første baseline | siste baseline | start | slutt | egenstart | egen-slutt + ... trygt | utrygt; )
- tøye ut(standard): strekk for å fylle beholder (min-bredde/maks-bredde respekteres fortsatt)
- flex-start / start / selvstart: elementer er plassert i begynnelsen av tverraksen. Forskjellen mellom dem er liten og ligger i samsvar flex-retning regler eller skrivemodus regler
- flex-ende / slutt / selvslutt: Elementene er plassert i enden av tverraksen. Forskjellen er igjen subtil og ligger i samsvar flex-retning eller skrivemodus regler
- senter: elementer er sentrert på tverraksen
- grunnlinje: Elementer er justert til grunnlinjen
align-innhold
Denne egenskapen justerer linjer i en fleksibel beholder når det finnes ekstra plass på tverraksen, lik rettferdiggjøre-innhold Justerer individuelle elementer innenfor en hovedakse.
Merk: Denne egenskapen har ingen effekt når det bare er én rad med flexvarer.
Container ( align-content: flex-start | flex-end | center | space-between | space-around | space-jevnt | strekke | start | slutt | baseline | første baseline | siste baseline + ... trygt | usikkert; )
- flex-start / start: elementer flyttet til begynnelsen av beholderen. Mer støttet flex-start bruker, flex-retning samtidig som start bruker skrivemodus retning.
- flex-ende / slutt: elementer flyttet til enden av beholderen. Mer støttet flex-ende bruker flex-retning samtidig som slutt bruker skrivemodus retning.
- senter: Elementene er sentrert i beholderen
- mellomrom: elementer er jevnt fordelt; den første linjen er i begynnelsen av beholderen og den siste linjen er på slutten
- plass rundt: Elementene er jevnt fordelt med lik avstand rundt hver rad
- plass-jevnt: Elementene er jevnt fordelt, med lik plass rundt dem
- tøye ut(standard): linjer strekker seg for å fylle den gjenværende plassen
Egenskaper for første underordnede elementer (flekselementer)
rekkefølge
Som standard er flex-elementer ordnet i sin opprinnelige rekkefølge. Imidlertid eiendommen rekkefølge kontrollerer rekkefølgen de vises i flexbeholderen.
Vare (rekkefølge:
flex-vokse
Denne egenskapen bestemmer evnen til et flexelement til å strekke seg når det er nødvendig. Den tar en verdi fra null, som fungerer som en proporsjon. Dette er egenskapen til hvor mye tilgjengelig plass i en fleksibel beholder et element skal oppta.
Hvis for alle elementer flex-vokse satt til 1, vil den gjenværende plassen i beholderen bli jevnt fordelt mellom alle underordnede elementer. Hvis ett av de underordnede elementene har en verdi på 2, vil det elementet ta opp dobbelt så mye plass som de andre (eller prøve i det minste).
Vare(flex-grow:
flex-krympe
Denne egenskapen bestemmer evnen til et fleksibelt element til å komprimere når det er nødvendig.Vare (flekskrympe:
Negative tall støttes ikke.
flex-basis
Denne egenskapen spesifiserer standardstørrelsen til et element før tildeling av gjenværende plass. Dette kan være en lengde (f.eks. 20%, 5rem osv.) eller søkeord. Nøkkelord auto betyr "se på min bredde- eller høydeegenskap". Nøkkelord innhold betyr "størrelse basert på elementinnhold" - dette søkeordet støttes fortsatt ikke så godt, så det er vanskelig å sjekke hva det brukes til maks-innhold, min-innhold eller passe-innhold.Vare (fleksbasert:
Hvis satt til 0
, den ekstra plassen rundt innholdet tas ikke i betraktning. Hvis satt til auto, ekstra plass er fordelt avhengig av sin flex-vokse betydninger.
Se denne tegningen.
bøye seg
Dette er forkortelsen for bruk flex-vokse, flex-krympe Og flex-basis sammen. Andre og tredje parameter ( flex-krympe Og flex-basis) er valgfrie. Standard er 0 1 auto.Vare ( flex: ingen | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}
Det anbefales å bruke denne stenografiegenskapen i stedet for å angi individuelle egenskaper. Denne reduksjonen setter intelligent andre verdier.
innrette seg selv
Denne egenskapen lar deg overstyre standardjusteringen (eller spesifisert ved å bruke align-elementer) for individuelle flexvarer.
Vær så snill å se align-elementer eiendom for å forstå de tilgjengelige verdiene.
Element ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )
Vær oppmerksom på at eiendommer flyte, klar Og vertikaljuster påvirker ikke flexelementer.
Eksempler
La oss starte med veldig enkelt eksempel løse et nesten daglig problem: perfekt justering. Den enkleste løsningen for denne oppgaven er å bruke flexbox.Foreldre ( display: flex; høyde: 300px; /* Eller hva som helst */ ) .child ( width: 100px; /* Eller hva som helst */ høyde: 100px; /* Eller hva som helst */ margin: auto; /* Magic ! */ )
Dette skjer på grunn av at marginen for vertikal justering er satt til auto i en fleksibel beholder, absorberer ekstra plass. Så setter margin til auto vil gjøre objektet perfekt sentrert på begge akser.
La oss nå bruke noen flere egenskaper. Tenk på en liste med 6 elementer, alle med faste størrelser, men det kan også være automatiske størrelser. Vi ønsker at de skal være jevnt fordelt langs den horisontale aksen slik at når nettleserstørrelsen endres, skaleres alt godt og uten mediespørringer.
Flex-container ( /* Først lager vi en flex-kontekst */ display: flex; /* Deretter definerer vi en flex-retning og lar elementer pakkes inn på nye linjer * Husk at dette er det samme som: * flex-direction: rad ; * flex-wrap: wrap */ flex-flow: row wrap /* Deretter bestemmer vi hvordan gjenværende plass er fordelt */ justify-content: space-around;
Klar. Alt annet er bare styling.
Hvis du endrer skjermoppløsningen eller skalaen, vil det se slik ut:
La oss prøve noe annet. Tenk deg at vi har høyrejusterte navigasjonselementer øverst på nettstedet vårt, men vi vil at de skal rettferdiggjøres på mellomstore skjermer og i én enkelt kolonne på små enheter. Det er ganske enkelt.
/* Store skjermer */ .navigation ( display: flex; flex-flow: row wrap; /* Dette vil justere elementene til slutten av linjen på hovedaksen */ justify-content: flex-end; ) /* Middels skjermer */ @ media all og (maks-bredde: 800px) ( .navigation ( /* På mellomstore skjermer sentrerer vi elementer ved å fordele mellomrom jevnt rundt elementene */ justify-content: space-around; ) ) /* Små skjermer */ @media alle og (max-width: 500px) ( .navigation ( /* På små skjermer bruker vi ikke lenger radretning, men kolonne */ flex-direction: kolonne; ) )
Store skjermer
Middels skjermer
Små skjermer
La oss prøve noe enda bedre ved å leke med fleksibiliteten til flex-elementer! Hva med et sideoppsett med 3 kolonner i full høyde med topp- og bunntekst. Og avhenger ikke av den første rekkefølgen av elementene.
Wrapper ( display: flex; flex-flow: row wrap; ) /* Vi sier at alle elementer har en bredde på 100%, via flex-base */ .wrapper > * ( flex: 1 100%; ) /* Vi bruker den opprinnelige bestillingen for det første mobilalternativet * 1. overskrift * 2. artikkel * 3. til side 1 * 4. til side 2 * 5. bunntekst */ /* Midtskjermer */ @media alle og (min-bredde: 600px) ( /* Vi ber begge sidefeltene være på samme linje */ .aside ( flex: 1 auto; ) ) /* Store skjermer */ @media all and (min-width: 800px) ( /* Vi inverterer rekkefølgen til første sidefelt og hovedelementet og si til hovedelementet slik at det tar opp to ganger bredden av de to andre sidefeltene */ .main ( flex: 2 0px; ) .aside-1 ( rekkefølge: 1; ) .main ( rekkefølge : 2; ) .aside-2 ( rekkefølge : 3; ) .bunntekst ( rekkefølge: 4; ) )
@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit- box-flex: $values; -moz-box-flex: $values: $values -ordinal-gruppe: $val; -ms-flex-ordre: $val;
Feil
Flexbox er selvfølgelig ikke uten feil. Den beste samlingen av disse jeg har sett er Flexbugs av Philip Walton og Greg Whitworth. Dette er et åpent depot kildekodeå holde styr på alle, så jeg tror det er best å bare linke til det.
Nettleserstøtte
Inndelt etter flexbox "versjon":- (ny) betyr nylig syntaks fra spesifikasjonen (for eksempel display: flex;)
- (tweener) betyr merkelig uoffisiell syntaks siden 2011 (f.eks display: flexbox;)
- (gammel) betyr gammel syntaks siden 2009 (f.eks display: boks;)
Blackberry Browser 10+ støtter den nye syntaksen.
For å få tilleggsinformasjon om hvordan du blander syntakser for å få bedre nettleserstøtte, vennligst se
Flexbox kan med rette kalles et vellykket forsøk på å løse et stort spekter av problemer når man bygger oppsett i CSS. Men før vi går videre til beskrivelsen, la oss finne ut hva som er galt med layoutmetodene vi bruker nå?
Enhver layoutdesigner vet flere måter å justere noe vertikalt eller lage en 3-kolonne layout med en gummiaktig midtsøyle. Men la oss innrømme at alle disse metodene er ganske merkelige, ser ut som et hack, er ikke egnet i alle tilfeller, er vanskelige å forstå og fungerer ikke hvis visse magiske forhold som har utviklet seg historisk ikke er oppfylt.
Dette skjedde fordi html og css utviklet seg evolusjonært. I begynnelsen var nettsider som enkelttråder tekstdokumenter, litt senere ble oppdelingen av siden i blokker gjort med tabeller, så ble det moteriktig å sette med flyter, og etter den offisielle døden til ie6 ble det også lagt til teknikker med inline-blokk. Som et resultat arvet vi en eksplosiv blanding av alle disse teknikkene, brukt til å bygge oppsett for 99,9 % av alle eksisterende nettsider.
Flerlinjeorganisering av blokker inne i en fleksibel beholder.
flex-wrap
Alle eksemplene vi ga ovenfor ble bygget med hensyn til enkeltrads (enkeltsøyle) arrangement av blokker. Det må sies at som standard vil en fleksibel beholder alltid arrangere blokkene inne i seg selv i en linje. Imidlertid støtter spesifikasjonen også flerlinjemodus. Flex-wrap CSS-egenskapen er ansvarlig for multi-line innhold inne i en flex container.
Tilgjengelige verdier flex-wrap:
- nowrap (standardverdi): blokker er ordnet i en linje fra venstre til høyre (i rtl fra høyre til venstre)
- wrap: blokker er arrangert i flere horisontale rader (hvis de ikke passer i en rad). De følger hverandre fra venstre til høyre (i rtl fra høyre til venstre)
- wrap-reverse: samme som pakke inn, men blokkene er ordnet i omvendt rekkefølge.
flex-flow er en praktisk stenografi for flex-direction + flex-wrap
I hovedsak gir flex-flow muligheten til å beskrive retningen til hoved- og flerlinjet tverrakse i en egenskap. Standard flex-flow: rad nowrap .
flex-flow:<‘flex-direction’> || <‘flex-wrap’>
CSS
/* dvs. ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* dette er det samme som... */ .my-flex-block( flex-flow: column wrap )align-innhold
Det er også en align-content-egenskap, som bestemmer hvordan de resulterende radene med blokker vil bli justert vertikalt og hvordan de vil dele hele plassen til flex-beholderen.
Viktig: align-content fungerer bare i flerlinjemodus (dvs. i tilfelle flex-wrap:wrap; eller flex-wrap:wrap-reverse;)
Tilgjengelige verdier align-innhold:
- flex-start: rader med blokker presses til begynnelsen av flex-beholderen.
- flex-ende: rader med blokker presses til enden av flex-beholderen
- sentrum: rader med blokker er i midten av fleksbeholderen
- mellomrom: den første raden med blokker er plassert i begynnelsen av fleksbeholderen, den siste raden med blokker er på slutten, alle andre rader er jevnt fordelt i den gjenværende plassen.
- plass rundt: rader med blokker er jevnt fordelt fra begynnelsen til slutten av flex-beholderen, og deler all tilgjengelig plass likt.
- tøye ut (standardverdi): Rekkene med blokker strekkes ut for å ta opp all tilgjengelig plass.
CSS-egenskapene flex-wrap og align-content skal brukes direkte på flex-beholderen, ikke på dens barn.
Demo av multi-line egenskaper i flex
CSS-regler for underordnede elementer i en fleksibel beholder (fleksblokker)
flex-basis – den grunnleggende størrelsen på en enkelt flex-blokk
Angir den opprinnelige hovedaksestørrelsen for en fleksblokk før transformasjoner basert på andre fleksfaktorer brukes på den. Kan spesifiseres i alle lengdeenheter (px, em, %, ...) eller auto (standard). Hvis satt som auto, blir blokkdimensjonene (bredde, høyde) tatt som grunnlag, som igjen kan avhenge av størrelsen på innholdet, hvis ikke spesifisert eksplisitt.
flex-grow – "grådighet" av en enkelt flexblokk
Bestemmer hvor mye større en individuell flexblokk kan være enn tilstøtende elementer, om nødvendig. flex-grow aksepterer en dimensjonsløs verdi (standard 0)
Eksempel 1:
- Hvis alle flexbokser inne i en flexbeholder har flex-grow:1, vil de ha samme størrelse
- Hvis en av dem har flex-grow:2 vil den være 2 ganger større enn alle de andre
Eksempel 2:
- Hvis alle flexbokser inne i en flexcontainer har flex-grow:3, vil de ha samme størrelse
- Hvis en av dem har flex-grow:12 så vil den være 4 ganger større enn alle de andre
Det vil si at den absolutte verdien av flex-grow ikke bestemmer den nøyaktige bredden. Den bestemmer graden av "grådighet" i forhold til andre flexblokker på samme nivå.
flex-shrink – "komprimerbarhetsfaktoren" til en enkelt flexblokk
Bestemmer hvor mye flexblokken vil krympe i forhold til tilstøtende elementer inne i flexbeholderen hvis det ikke er nok ledig plass. Standard er 1.
flex – stenografi for egenskapene flex-grow, flex-shrink og flex-basis
flex: ingen | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
CSS
/* dvs. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex basis: 30em; ) /* dette er det samme som... */ .my-flex-block( flex : 12 3 30 em )Demo for flex-grow, flex-shrink og flex-basis
align-self – justering av en enkelt fleksblokk langs den tverrgående aksen.
Gjør det mulig å overstyre flexcontainerens align-items-egenskap for en individuell flexblokk.
Tilgjengelige align-self-verdier (samme 5 alternativer som align-elementer)
- flex-start: flex-blokken presses til begynnelsen av den tverrgående aksen
- flex-end: flex-blokken presses mot enden av tverraksen
- sentrum: flexblokken er plassert i midten av tverraksen
- baseline: flex blokk er justert til baseline
- tøye ut (standardverdi): Fleksiblokken strekkes for å ta opp all tilgjengelig plass langs tverraksen, med hensyn til min-bredde / maks-bredde hvis den er satt.
ordre – rekkefølgen til en enkelt flexblokk inne i en flexbeholder.
Som standard vil alle blokker følge hverandre i den rekkefølgen som er spesifisert i html. Denne rekkefølgen kan imidlertid endres ved å bruke ordreegenskapen. Det er spesifisert som et heltall og er standard til 0.
Ordningsverdien spesifiserer ikke den absolutte posisjonen til elementet i sekvensen. Den bestemmer vekten av elementets posisjon.
HTML
I dette tilfellet vil blokkene følge etter hverandre langs hovedaksen i følgende rekkefølge: element5, element1, element3, element4, element2
Demo for align-self og orden
margin: auto vertikalt. Drømmer blir sanne!
Du kan elske Flexbox i det minste fordi den velkjente horisontale justeringen via margin:auto fungerer her for vertikaler også!
My-flex-container ( display: flex; høyde: 300px; /* Eller hva som helst */ ) .my-flex-block ( width: 100px; /* Eller hva som helst */ høyde: 100px; /* Eller hva som helst * / margin: auto; /* Magi Blokken er sentrert vertikalt og horisontalt */ )
Ting å huske
- Du bør ikke bruke flexbox der det ikke er nødvendig.
- Å definere regioner og endre rekkefølgen på innholdet er i mange tilfeller fortsatt nyttig å gjøre avhengig av sidestrukturen. Tenk gjennom det.
- Forstå flexbox og kjenne det grunnleggende. Dette gjør det mye lettere å oppnå forventet resultat.
- Ikke glem marginene. De tas med i betraktningen når du stiller inn aksejustering. Det er også viktig å huske at marginer i flexbox ikke "kollapser" slik de gjør i en normal flyt.
- Floatverdien til flexblokker er ikke tatt i betraktning og har ingen betydning. Dette kan nok på en eller annen måte brukes til grasiøs degradering når man bytter til flexbox.
- Flexbox egner seg veldig godt for layout av webkomponenter og enkeltdeler av nettsider, men den har ikke vist seg fra sin beste side når det skal legges ut grunnleggende layouter (posisjon av artikkel, topptekst, bunntekst, navbar osv.). Dette er fortsatt et kontroversielt poeng, men denne artikkelen viser manglene ganske overbevisende xanthir.com/blog/b4580
Endelig
Jeg tror at flexbox selvfølgelig ikke vil erstatte alle andre layoutmetoder, men selvfølgelig vil den i nær fremtid oppta en verdig nisje i å løse et stort antall oppgaver. Og selvfølgelig må du prøve å jobbe med ham nå. En av de følgende artiklene vil bli viet til spesifikke eksempler på arbeid med flex layout. Abonner på nyheter ;)
Kort sagt gir layout med Flexbox oss enkle løsninger en gang vanskelige oppgaver. For eksempel, når du trenger å justere et element vertikalt, eller trykke bunnteksten til bunnen av skjermen, eller bare sette inn flere blokker på en rad slik at de opptar all ledig plass. Lignende problemer kan løses uten flex. Men som regel er disse løsningene mer som "krykker" - teknikker for å bruke CSS til andre formål enn det tiltenkte formålet. Mens med flexbox løses slike oppgaver akkurat slik flexmodellen er tenkt.
CSS Flexible Box Layout Module (CSS-modul for oppsett med fleksible blokker), flexbox for korte, ble laget for å eliminere manglene ved å lage et bredt utvalg av HTML-design, inkludert de som er tilpasset forskjellige bredder og høyder, og gjøre oppsettet logisk og enkelt . Og en logisk tilnærming fungerer som regel på uventede steder, hvor resultatet ikke er sjekket - logikk er alt!
Flexbox lar deg elegant kontrollere en rekke parametere for elementer inne i en beholder: retning, rekkefølge, bredde, høyde, justering langs og på tvers, fordeling av ledig plass, strekking og kompresjon av elementer.
Grunnleggende kunnskap
En FlexBox består av en beholder og dens elementer (fleksible elementer).
For å aktivere flexbox, hvem som helst HTML-element bare tilordne CSS-egenskapen display:flex; eller display:inline-flex; .
Etter å ha aktivert flex-egenskapen, opprettes to akser inne i beholderen: hoved- og tverrgående (vinkelrett (⊥), tverrakse). Alle nestede elementer (på det første nivået) er stilt opp langs hovedaksen. Som standard er hovedaksen horisontal og rettet fra venstre mot høyre (→), og tverraksen er tilsvarende vertikal og rettet fra topp til bunn (↓).
Hoved- og tverraksen kan byttes, da vil elementene være plassert fra topp til bunn (↓) og når de ikke lenger passer i høyden, vil de bevege seg fra venstre til høyre (→) - det vil si at aksene ganske enkelt byttet plass . I dette tilfellet endres ikke begynnelsen og slutten av arrangementet av elementene - bare retningene (aksene) endres! Dette er grunnen til at du må forestille deg aksene inne i beholderen. Man skal imidlertid ikke tro at det er noen "fysiske" akser og de påvirker noe. Aksen her er bare bevegelsesretningen til elementene inne i beholderen. For eksempel, hvis vi spesifiserte justeringen av elementer til midten av hovedaksen og deretter endret retningen til denne hovedaksen, vil justeringen endres: elementene var i midten horisontalt, men ble i midten vertikalt ... Se eksempelet.
Et annet viktig trekk ved Flexbox er tilstedeværelsen av rader i tverrretningen. For å forstå hva vi snakker om, la oss forestille oss at det er en horisontal hovedakse, det er mange elementer og de "passer" ikke inn i beholderen, så de flytter til en annen rad. De. en beholder ser slik ut: en beholder med to rader inni den, hver rad inneholder flere elementer. Introdusert? Husk nå at vi kan vertikalt justere ikke bare elementer, men også rader! Hvordan dette fungerer ser man tydelig i eksemplet for eiendommen. Og slik ser det ut skjematisk:
CSS-egenskaper, som kan påvirke layoutmodellen: float, clear, vertikal-juster, kolonner fungerer ikke i flex design. Her brukes en annen modell for å konstruere en layout, og disse CSS-egenskapene blir ganske enkelt ignorert.
Flexbox CSS-egenskaper
Flexbox inneholder forskjellige CSS-regler for å kontrollere hele flex-designet. Noen må påføres hovedbeholderen, og andre på elementene i denne beholderen.
For container
vise:Aktiverer flex-egenskapen for elementet. Denne egenskapen dekker selve elementet og dets nestede elementer: bare etterkommere på første nivå påvirkes - de vil bli elementer i flex-beholderen.
- bøye seg- elementet strekker seg i hele sin bredde og har sin fulle plass blant de omkringliggende blokkene. Linjeskift forekommer i begynnelsen og slutten av blokken.
- inline-flex- et element er viklet rundt andre elementer. I dette tilfellet er den interne delen formatert som et blokkelement, og selve elementet er formatert som inline.
flex og inline-flex skiller seg ved at de samhandler forskjellig med omkringliggende elementer, på samme måte som display:block og display:inline-block .
flex-retning:Endrer retningen til beholderens hovedakse. Tverraksen endres tilsvarende.
- rad (standard)- retning av elementer fra venstre til høyre (→)
- kolonne- retning av elementer fra topp til bunn (↓)
- rad-revers- retning av elementer fra høyre til venstre (←)
- kolonne-revers- retning av elementer fra bunn til topp ()
Styrer overføringen av elementer som ikke passer inn i beholderen.
- nowrap (standard)- nestede elementer plasseres i én rad (med retning=rad) eller i én kolonne (med retning=kolonne) uavhengig av om de passer inn i beholderen eller ikke.
- pakke inn- inkluderer flytting av elementer til neste rad dersom de ikke passer inn i beholderen. Dette muliggjør bevegelse av elementer langs den tverrgående aksen.
- wrap-revers- det samme som wrap, bare overføringen vil ikke være nede, men opp (i motsatt retning).
Kombinerer både flex-direction og flex-wrap egenskaper. De brukes ofte sammen, så for å skrive mindre kode ble flex-flow-egenskapen opprettet.
flex-flow aksepterer verdiene til disse to egenskapene, atskilt med et mellomrom. Eller du kan spesifisere en enkelt verdi for en hvilken som helst eiendom.
/* kun flex-retning */ flex-flow: rad; flex-flow: rad-revers; flex-flow: kolonne; flex-flow: kolonne-revers; /* bare flex-wrap */ flex-flow: nowrap; flex-flow: vikle; flex-flow: wrap-reverse; /* begge verdiene på en gang: flex-direction og flex-wrap */ flex-flow: row nowrap; flex-flow: kolonneinnpakning; flex-flow: kolonne-revers wrap-reverse; begrunn-innhold:
Justerer elementer langs hovedaksen: hvis retning = rad, deretter horisontalt, og hvis retning = kolonne, deretter vertikalt.
- flex-start (standard)- elementene vil gå fra begynnelsen (det kan være litt plass igjen på slutten).
- flex-ende- elementene er justert på slutten (plassen vil forbli i begynnelsen)
- senter- i midten (plassen vil forbli til venstre og høyre)
- mellomrom- de ytterste elementene presses mot kantene (mellomrommet mellom elementene er jevnt fordelt)
- plass rundt- ledig plass er jevnt fordelt mellom elementene (de ytterste elementene presses ikke mot kantene). Avstanden mellom kanten av beholderen og de ytre elementene vil være halvparten så stor som mellomrommet mellom elementene i midten av raden.
- plass-jevnt
Justerer radene som inneholder elementer langs den tverrgående aksen. Samme som begrunn-innhold bare for motsatt akse.
Merk: Fungerer når det er minst 2 rader, dvs. Hvis det bare er 1 rad, vil ingenting skje.
De. hvis flex-direction: row , vil denne egenskapen justere usynlige rader vertikalt. Det er viktig å merke seg her at høyden på blokken må stilles stivt og må være større enn høyden på radene, ellers vil radene selv strekke beholderen og enhver justering av dem blir meningsløs, fordi det ikke er ledig plass mellom dem... Men når flex-direction: column , så beveger radene seg horisontalt → og bredden på beholderen er nesten alltid større enn bredden på radene, og det er umiddelbart fornuftig å justere radene...
- strekke (standard)- rader strekker seg for å fylle raden helt
- flex-start- rader er gruppert på toppen av beholderen (det kan være litt plass igjen på slutten).
- flex-ende- rader er gruppert i bunnen av beholderen (plass vil være igjen i begynnelsen)
- senter- rader er gruppert i midten av beholderen (plass vil forbli i kantene)
- mellomrom- de ytre radene presses mot kantene (mellomrommet mellom radene er jevnt fordelt)
- plass rundt- ledig plass er jevnt fordelt mellom radene (de ytre elementene presses ikke mot kantene). Avstanden mellom kanten av beholderen og de ytre elementene vil være halvparten så stor som mellomrommet mellom elementene i midten av raden.
- plass-jevnt- det samme som space-around , kun avstanden mellom de ytre elementene og kantene på beholderen er den samme som mellom elementene.
Justerer elementer langs den tverrgående aksen innenfor en rad (usynlig rad). De. Selve radene er justert via align-content , og elementene i disse radene (radene) er justert via align-elementer og langs den tverrgående aksen. Det er ingen slik inndeling langs hovedaksen, det er ikke noe konsept for rader og elementer er justert gjennom justify-content .
- strekke (standard)- elementer strekkes for å fylle linjen helt
- flex-start- elementer trykkes til begynnelsen av raden
- flex-ende- elementer presses til slutten av raden
- senter- elementene er justert til midten av raden
- grunnlinje- Elementer er justert til tekstens grunnlinje
For containerelementer
flex-grow:Stiller inn elementets forstørrelsesfaktor når det er ledig plass i beholderen. Standard flex-grow: 0 dvs. ingen av elementene skal vokse og fylle den ledige plassen i beholderen.
Standard flex-grow: 0
- Hvis du spesifiserer flex-grow:1 for alle elementene, vil de alle strekke seg likt og fylle all ledig plass i beholderen.
- Hvis du spesifiserer flex-grow:1 til et av elementene, vil det fylle all ledig plass i beholderen og justeringer via justify-content vil ikke lenger fungere: det er ingen ledig plass å justere...
- Med flex-grow:1 . Hvis en av dem har flex-grow:2 vil den være 2 ganger større enn alle de andre
- Hvis alle flexbokser inne i en flexcontainer har flex-grow:3, vil de ha samme størrelse
- Med flex-grow:3 . Hvis en av dem har flex-grow:12 så vil den være 4 ganger større enn alle de andre
Hvordan det fungerer? La oss si at en beholder er 500 piksler bred og inneholder to elementer, hver med en basebredde på 100 piksler. Dette betyr at det er 300 ledige piksler igjen i beholderen. Nå, hvis vi spesifiserer flex-grow:2; , og den andre flex-grow: 1; , så vil blokkene oppta hele den tilgjengelige bredden på beholderen, og bredden på den første blokken vil være 300px, og den andre 200px. Dette forklares av det faktum at de tilgjengelige 300px med ledig plass i beholderen ble fordelt mellom elementene i et 2:1-forhold, +200px for den første og +100px for den andre.
Merk: du kan angi brøktall i verdien, for eksempel: 0,5 - flex-grow:0,5
bøyelig krympe:Stiller inn elementets reduksjonsfaktor. Egenskapen er det motsatte av flex-grow og bestemmer hvordan elementet skal krympe dersom det ikke er ledig plass igjen i containeren. De. egenskapen begynner å fungere når summen av størrelsene til alle elementene er større enn størrelsen på beholderen.
Standard flex-shrink:1
La oss si at beholderen er 600px bred og inneholder to elementer, hver 300px bred - flex-basis:300px; . De. to elementer fyller beholderen helt. Gi det første elementet flex-shrink: 2; og den andre bøyningskrympen: 1; . La oss nå redusere bredden på beholderen med 300px, dvs. elementer må krympe med 300px for å passe inn i beholderen. De vil krympe i forholdet 2:1, dvs. den første blokken vil krympe med 200px, og den andre med 100px og de nye elementstørrelsene blir 100px og 200px.
Merk: du kan spesifisere brøktall i verdien, for eksempel: 0,5 - flex-shrink:0,5
flex-basis:Angir grunnbredden på elementet - bredden før andre forhold som påvirker bredden på elementet beregnes. Verdien kan spesifiseres i px, em, rem, %, vw, vh, etc. Den resulterende bredden vil avhenge av basisbredden og verdiene for flex-grow, flex-shrink og innholdet inne i blokken. Med auto får elementet en basisbredde i forhold til innholdet inne i det.
Standard: auto
Noen ganger er det bedre å stille inn bredden på et element hardt gjennom den vanlige breddeegenskapen. For eksempel, bredde: 50%; vil bety at elementet inne i beholderen vil være nøyaktig 50 %, men flex-grow og flex-shrink-egenskapene vil fortsatt fungere. Dette kan være nødvendig når elementet er strukket av innholdet inne i det, mer enn spesifisert i flex-basis. Eksempel.
flex-basis vil være "stiv" hvis stretch og shrink er satt til null: flex-basis:200px; flex-grow:0; flex-shrink:0; . Alt dette kan skrives slik: flex:0 0 200px; .
flex: (vekst krympebasis)En kort oppsummering av de tre egenskapene: flex-grow flex-shrink flex-basis .
Standard: flex: 0 1 auto
Du kan imidlertid angi én eller to verdier:
Flex: ingen; /* 0 0 auto */ /* tall */ flex: 2; /* flex-grow (flex-basis går til 0) */ /* ikke et tall */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: innhold; /* flex-basis: innhold */ flex: 1 30px; /* flex-grow og flex-basis */ flex: 2 2; /* flex-grow og flex-shrink (flex-basis går til 0) */ flex: 2 2 10%; /* flex-grow og flex-shrink og flex-basis */ align-self:
Lar deg endre egenskapen align-items, bare for ett enkelt element.
Standard: fra align-items container
- tøye ut- elementet strekkes for å fylle linjen helt
- flex-start- elementet trykkes til begynnelsen av linjen
- flex-ende- elementet presses til slutten av linjen
- senter- elementet er justert til midten av linjen
grunnlinje- elementet er justert til tekstens grunnlinje
Lar deg endre rekkefølgen (posisjon, posisjon) til et element i den generelle raden.
Standard: rekkefølge: 0
Som standard har elementer rekkefølge: 0 og plasseres i rekkefølgen de vises i HTML-koden og retningen til raden. Men hvis du endrer verdien på ordreegenskapen, vil elementene ordnes i rekkefølgen av verdier: -1 0 1 2 3 ... . For eksempel, hvis du spesifiserer rekkefølge: 1 til ett av elementene, vil alle nuller gå først, og deretter elementet med 1.
På denne måten kan du for eksempel flytte det første elementet til slutten uten å endre bevegelsesretningen til de gjenværende elementene eller HTML-koden.
Notater
Hva er forskjellen mellom flex-basis og bredde?
Nedenfor er de viktige forskjellene mellom flex-basis og bredde/høyde:
- Ved bruk av flex-egenskapen kan 3 verdier (flex-grow/flex-shrink/flex-basis) kombineres og skrives kort, men for å vokse eller krympe i bredden må du skrive separat. For eksempel: flex:0 0 50% == bredde:50%; flex-shrink:0; . Noen ganger er det bare upraktisk.
flex-basis fungerer kun for hovedaksen. Dette betyr at med flex-direction:row styrer flex-basis bredden, og med flex-direction:column styrer høyden. .
flex-basis gjelder kun flexelementer. Dette betyr at hvis du deaktiverer flex for en container, vil denne egenskapen ikke ha noen effekt.
Absolutte containerelementer deltar ikke i flexkonstruksjon... Dette betyr at flex-basis ikke påvirker flexelementene til en container hvis de er absolutt posisjon:absolutt . De må spesifisere bredde/høyde.
Hvis mulig, foretrekk fortsatt flex-basis. Bruk kun bredde når flex-basis ikke er hensiktsmessig.
Forskjellen mellom flex-basis og bredde - en feil eller en funksjon?
Innholdet i et flex-element skyver det og kan ikke gå utover det. Men hvis du angir bredden ved å bruke width eller max-width i stedet for flex-basis , vil et element inne i en flex-beholder kunne strekke seg utover grensene til den beholderen (noen ganger er dette akkurat den oppførselen du ønsker). Eksempel:
Eksempler på Flex layout
Ingen steder i eksemplene brukes prefikser for kompatibilitet på tvers av nettlesere. Jeg gjorde dette for enkel lesing css. Se derfor eksempler i siste versjoner Chrome eller Firefox.
#1 Enkelt eksempel med vertikal og horisontal justering
La oss starte med det enkleste eksemplet - vertikal og horisontal justering på samme tid og i hvilken som helst blokkhøyde, til og med gummi.
Eller slik, uten blokk inni:
#1.2 Separasjon (brudd) mellom fleksblokkelementer
For å plassere beholderelementer langs kantene og tilfeldig velge et element hvoretter det blir en pause, må du bruke egenskapen margin-left:auto eller margin-right:auto.
#2 Adaptiv meny på flex
La oss lage en meny helt øverst på siden. På en bred skjerm skal den være til høyre. Juster i gjennomsnitt i midten. Og på den lille må hvert element være på en ny linje.
#3 Adaptive 3 kolonner
Dette eksemplet viser hvordan du raskt og enkelt kan lage 3 kolonner, som, når de er smalere, blir til 2 og deretter til 1.
Vær oppmerksom på at dette kan gjøres uten bruk av medieregler, alt er på flex.
Gå til jsfiddle.net og endre bredden på "resultat"-delen
#4 Adaptive blokker på flex
La oss si at vi må sende ut 3 blokker, en stor og to små. Samtidig er det nødvendig at blokkene tilpasser seg små skjermer. Vi gjør:
Gå til jsfiddle.net og endre bredden på "resultat"-delen
#5 Galleri med flex og overgang
Dette eksemplet viser hvor raskt du kan lage et søtt trekkspill med bilder ved hjelp av flex. Vær oppmerksom på overgangseiendommen for flex.
#6 Flex to Flex (bare et eksempel)
Oppgaven er å lage en fleksibel blokk. Slik at begynnelsen av teksten i hver blokk er på samme linje horisontalt. De. Når bredden smalner, vokser blokkene i høyden. Det er nødvendig at bildet er øverst, knappen er alltid nederst, og teksten i midten starter langs en horisontal linje...
For å løse dette problemet, strekkes blokkene i seg selv med flex og settes til størst mulig bredde. Hver innendørs enhet er også en flexkonstruksjon, med en rotert akse flex-direction:column; og elementet i midten (der teksten er) strekkes flex-grow:1; for å fylle all ledig plass, dette er hvordan resultatet oppnås - teksten begynte med en linje ...
Flere eksempler
Nettleserstøtte - 98,3 %
Selvfølgelig er det ingen full støtte, men alle moderne nettlesere støtter flexbox-design. Noen krever fortsatt prefikser. For et ekte bilde, la oss se på caniuse.com og se at 96,3 % av nettleserne som brukes i dag vil fungere uten prefikser, mens 98,3 % bruker prefikser. Dette er en utmerket indikator for å trygt bruke flexbox.
For å vite hvilke prefikser som er aktuelle i dag (juni 2019), vil jeg gi et eksempel på alle flex-regler med med nødvendige prefikser:
/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -ms-flex-wrap:-spaltepakke; :justify; distribuere; align-content:space-around ) /* Elements */ .flex-item ( -webkit-box-flex:1; -flex-negativ:2; :3; -ms-flex-ordre:2);
Det er bedre om egenskaper med prefikser går foran den opprinnelige egenskapen.
Denne listen inneholder ingen prefikser som er unødvendige i dag (ifølge caniuse), men generelt er det flere prefikser.
| Chrome | Safari | Firefox | Opera | DVS. | Android | iOS |
|---|---|---|---|---|---|---|
| 20- (gammel) | 3.1+ (gammel) | 2-21 (gammel) | 10 (tweener) | 2.1+ (gammel) | 3,2+ (gammel) | |
| 21+ (ny) | 6.1+ (ny) | 22+ (ny) | 12.1+ (ny) | 11+ (ny) | 4.4+ (ny) | 7.1+ (ny) |
- (ny) - ny syntaks: display: flex; .
- (tweener) - gammel uoffisiell syntaks fra 2011: display: flexbox; .
- (gammel) - gammel syntaks fra 2009: display: box;
Video
Vel, ikke glem videoen, noen ganger er den også interessant og forståelig. Her er et par populære:
Nyttige lenker på Flex
flexboxfroggy.com - flexbox pedagogisk spill.
Flexplorer er en visuell flexkodebygger.
flex-retning: kolonne;
Du vil se at dette setter elementene tilbake i et kolonneoppsett, omtrent som de var før vi la til en CSS. Før du går videre, slett denne erklæringen fra eksemplet ditt.
Merk: Du kan også legge ut fleksible elementer i omvendt retning ved å bruke verdiene for rad-revers og kolonne-revers. Eksperimenter med disse verdiene også!
Innpakning
Et problem som oppstår når du har en fast mengde bredde eller høyde i oppsettet ditt, er at flexbox-barna til slutt vil flyte over beholderen sin og bryte oppsettet. Ta en titt på vårt flexbox-wrap0.html eksempel, og prøv å se det live (ta en lokal kopi av denne filen nå hvis du vil følge med på dette eksemplet):
Her ser vi at barna virkelig bryter ut av containeren sin. En måte du kan fikse dette på er å legge til følgende erklæring til elementet ditt representerer en frittstående seksjon - som ikke har et mer spesifikt semantisk element for å representere det inneholdt i et html-dokument.>
Flex-wrap: wrap; flex: 200px;
Prøv dette nå; du vil se at oppsettet ser mye bedre ut med dette inkludert:
Vi har nå flere rader - så mange flexbox-barn er montert på hver rad som det er fornuftig, og eventuelt overløp flyttes ned til neste linje. Flex: 200px-deklarasjonen som er satt på artiklene betyr at hver vil være minst 200px bred; vi vil diskutere denne egenskapen mer detaljert senere. Du vil kanskje også legge merke til at de siste barna på den siste raden er gjort bredere, slik at hele raden fortsatt er fylt.
Men det er mer vi kan gjøre her. Først av alt, prøv å endre egenskapsverdien for flex-direction til rad-revers - nå vil du se at du fortsatt har flerradsoppsettet, men det starter fra det motsatte hjørnet av nettleservinduet og flyter omvendt.
flex-flow stenografi
På dette punktet er det verdt å merke seg at det finnes en stenografi for flex-direction og flex-wrap - flex-flow. Så for eksempel kan du erstatte
Flex-retning: rad; flex-wrap: vikle;
Flex-flow: radomslag;
Fleksibel dimensjonering av flexvarer
La oss nå gå tilbake til vårt første eksempel, og se på hvordan vi kan kontrollere hvor stor andel av plass flex-elementer som tar opp din lokale kopi av flexbox0.html , eller ta en kopi av flexbox1.html som et nytt utgangspunkt ( se det. bo).
Først legger du til følgende regel nederst i CSS-en din:
Artikkel (fleks: 1; )
Dette er en enhetsløs proporsjonsverdi som dikterer hvor mye av den tilgjengelige plassen langs hovedaksen hvert flexelement vil ta opp. I dette tilfellet gir vi hver element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.!}
Legg nå til følgende regel under den forrige:
Artikkel:nth-of-type(3) ( flex: 2; )
Seksjon - artikkel artikkel artikkel - div - knapp div knapp div knapp knapp knapp
La oss se på koden vi har brukt for oppsettet.
Sammendrag
Det avslutter vår omvisning i det grunnleggende om flexbox. Vi håper du hadde det gøy, og vil ha en god lek med det mens du reiser videre med læringen din. Deretter skal vi se på et annet viktig aspekt ved CSS-oppsett - CSS Grids.
Start
