Alt om flexbox-egenskapene

Konseptet bak Flexbox-egenskapene er å gi containeren en mulighet til automatisk å endre bredden, høyden og rekkefølgen på gjenstandene slik at den best fyller ut ledig plass. Dette kan være veldig nyttig for å få plass til elementer i forskjellige skjermstørrelser og enheter. Elementer utvides for å fylle ut ledig plass eller krympe for å unngå et overløp.

CSS Flexbox-nett for nybegynnere

CSS er en av de første og enkleste tingene å lære innen webutvikling og design, men ikke ta feil av enkelheten på grunn av mangel på funksjoner. Den har en rekke fantastiske funksjoner og funksjoner som er klare til å bli benyttet, en av dem er den relativt nye layoutmodulen: Flexbox-egenskaper.

Flexbox-egenskapene er en av de nyere layoutene som er tilgjengelige for CSS3, og det er mye å lære om det. Her får vi praktiske oppsett og hvordan du bruker den. Før vi begynner, er her en liten bakgrunn om Flexbox-egenskaper:

Hva er layoutmodus?

På de enkleste vilkårene er CSS Flexbox-rutenettet en layoutmodus. CSS har en rekke eksisterende layoutmoduser. Blokkoppsettmodus (som skjerm: blokkering) har eksistert i lang tid. Blokkoppsett er et godt valg å utforme fulle dokumenter. Faktisk behandler en nettleser flere elementer som divs og avsnitt som blokkeringsnivå som standard.

En annen vanlig layoutmodus er inline. Den sterke taggen, input-taggen og ankeretiketten er eksempler på elementer på linje. Google Chrome utviklerverktøy lar deg til og med se et elements 'beregnede stil' for å bestemme CSS-egenskapene og verdiene som er brukt på elementene som ikke eksplisitt er angitt av utvikleren.

Den relativt nyere Flexbox-egenskapen (Fleksibel boks) -oppsettet er designet som en mer effektiv metode for å legge ut, justere og fordele plass mellom containere, selv om størrelsen på disse elementene er dynamisk eller ukjent. Derav begrepet "fleksibel".

Flexbox Properties-konseptet

Det viktigste med Flexbox-egenskapene er at det er retning-agnostisk. Mens blokkeringsoppsettet er vertikalbasert og inlineoppsettet er horisontalbasert, er heller ikke Flexbox det. Blokk og inline fungerer godt i riktige situasjoner, men mangler fleksibilitet til å støtte kompliserte eller store applikasjoner, spesielt når det gjelder å endre orientering, strekke, krympe, endre størrelse og på annen måte endre opp dimensjonene til elementene.

Hvor brukes Flexbox-egenskaper?

Som alle andre CSS-oppsett, brukes Flexbox best i visse situasjoner. Spesielt er det passende for småskalaoppsett og komponenter i en applikasjon. For layouter i større målestokk vil et rutenettoppsett være det klokere valget.

Hvorfor foretrekker Flexbox?

Mange utviklere og designere foretrekker Flexbox-egenskaper når de kan (noen ganger for ofte!). Dette er fordi Flexbox-egenskapene er enklere å bruke; plasseringen av elementene er mye enklere, slik at du kan få mer komplekse oppsett med mindre koding. Med andre ord, det gjør utviklingsprosessen enklere.

En guide til Flexbox-egenskaper

Nå som du vet litt om Flexbox-egenskaper og hvordan og hvorfor det fungerer, her er en detaljert guide til oppsettet. Oppsettets modell består av en foreldrebeholder, også kalt en "flexcontainer". De umiddelbare barna fra denne containeren kalles "fleksible elementer".

Oppsettet har gått gjennom flere iterasjoner og syntaksendringer i løpet av årene siden det første utkastet ble opprettet i 2009. Den siste Flexbox-spesifikasjonen støttes på følgende nettlesere:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Terminologien som brukes i Flexbox-egenskaper

Her er en titt på noen grunnleggende terminologier som brukes i Egenskapsoppsettet for Flexbox:

  • Skjerm: Denne kommandoen brukes til å definere flexbeholderen. Det kan være inline eller blokkere, avhengig av Det definerer også flexinnhold for alle elementene i beholderen. Eksempel:

.beholder (

skjerm: flex; / * eller inline-flex * /

)

  • Ordre: Fleksible elementer er lagt ut i henhold til kildebestillingen som standard, men egenskapen 'ordre' kan kontrollere rekkefølgen elementene vises i containeren. Eksempel:

.it (

rekkefølge: ;

)

  • Flekseretning: Denne rekkefølgen setter opp hovedaksen, og definerer retningen som flexelementene skal plasseres i beholderen. Fleksible elementer kan primært legges i vertikale eller horisontale retninger. Eksempel:

.beholder (

flex-direction: row | row-reverse | column | column-reverse;

)

  • Flex-grow: Denne ordren definerer flex-varens evne til automatisk å skalere opp hvis den har plass. Den kan akseptere en enhet uten verdi for å tjene som en andel. Denne verdien dikterer hvor mye plass gjenstanden skal ta opp i flexbeholderen. For eksempel, hvis alle elementene har flex-grow satt som 1, vil den gjenværende plassen i beholderen bli fordelt likt til alle barna. Hvis verdien er 2, vil den gjenværende plassen ta opp to ganger så mye plass som resten. Eksempel:

.it (

flex-grow:; / * standard 0 * /

)

  • Flex-krympe: Dette gjør akkurat det motsatte som flex-grow, ved at det krymper flex-elementene når det er nødvendig. Eksempel:

.it (

flex-shrink:; / * standard 1 * /

)

  • Fleksibasis: Denne ordren definerer en standardstørrelse for elementer før resten av plassen distribueres. Det kan være en lengde, som 5rem eller 20%, eller et nøkkelord. Nøkkelordet "auto" indikerer at varens bredde og høyde måles, og "innhold" nøkkelordet indikerer at varen er størrelse basert på innholdet. Eksempel:

.it (

flex-basis: | auto; / * standard auto * /

)

  • Flex: Dette er en kombinert kortfattet art for alle de ovennevnte tre egenskapene: flex-grow, flex-base og flex-shrink. Standard er '0 1 auto'.

.it (

flex: ingen | (||)

)

  • Begrunn innhold: Denne ordren definerer hovedaksen justering og hjelper til med å distribuere ekstra ledig plass hvis det er noe igjen når elementene er ubøyelige eller har nådd sin maksimale størrelse. Dette hjelper også med å kontrollere justeringen av elementet når det er et overløp.

.beholder (

justify-content: flex-start | flex slutt | sentrum | mellomrom | plass rundt;

)

  • Align-items: Dette brukes til å definere standardoppførselen til oppsettet for flex-elementer på kryssaksen til den gjeldende linjen. Det er egentlig en versjon av 'rettferdiggjøre innhold' på tverraksen, som er vinkelrett på hovedaksen. Eksempel:

.beholder (

align-items: flex-start | flex-end | sentrum | grunnlinje | tøye ut;

)

  • Juster innhold: Denne ordren justerer linjene i beholderen i tilfelle det er ekstra plass på tverraksen. Det ligner på "rettferdiggjøre innhold", men for tverraksen i stedet for hovedaksen. Hvis det bare er én linje med fleksible elementer, har ikke denne egenskapen noen effekt. Eksempel:

.beholder (

align-content: flex-start | flex-end | sentrum | mellomrom | space-rundt | tøye ut;

)

Bruker Flexbox egenskaper

For å bruke Flexbox-oppsettet, kan du ganske enkelt angi visningsegenskapen på HTML-overordnede element, som nedenfor:

.flex-container (

skjerm: -webkit-flex; / * Safari * /

skjerm: flex;

)

Hvis du foretrekker å vise som et inline-element, kan du skrive inn:

.flex-container (

skjerm: -webkit-inline-flex; / * Safari * /

skjerm: inline-flex;

)

Du krever bare at denne egenskapen skal settes på foreldrefleksbeholderen og dens umiddelbare flex-elementer. Containerbarna blir automatisk fleksible elementer.

Anbefalte kurs

  • Nettkurs om gratis jQuery
  • Nettkurs på gratis vinkel JS
  • Online trening på Mudbox
  • Sertifiseringstrening i gratis rubin

Flexbox Egenskaper - Flex containeregenskaper

Det er mange måter å gruppere Flexbox-egenskaper på, og den enkleste måten å lære om dem er ved å dele dem opp i Flex-beholder- og vareegenskaper. Vi har nettopp dekket noen av flex containeregenskapene ovenfor. La oss se på resten:

  • Flekseretning: rad eller kolonne

Egenskaper med fleksibel retning kan legges ut som kolonner vertikalt eller i rader horisontalt. Med radretning stables flex-elementene fra venstre til høyre som standard. Rad-revers endrer denne retningen til høyre-til-venstre. Kolonneretningen er topp-til-bunn som standard, og kolonne-revers-funksjonen reverserer dette til en topp-til-topp retning.

  • Flex-wrap: pakk inn eller pakk inn

Funksjonen med fleksibel omhylling styrer om flexcontainerens barn er lagt ut i flere eller enkelt linjer, og retningen som de nye linjene er stablet i. Nåverdien ser fleksible elementer vises i en enkelt rad, krympet for å passe til bredden på containeren som standard. Innpakningsverdien ser fleksible elementer vises i forskjellige rader i venstre-til-høyre eller topp-til-bunn retning. Du kan legge til omslag for å endre rekkefølgen også. Standardverdien er nå.

  • Flex-flow

Denne egenskapen er i utgangspunktet en korthet for å sette sammen flex-direction og flex-wrap egenskaper. Standardverdien er 'rad nowrap'. Eksempel:

.flex-container (

flex-flow: ||

)

  • Begrunn-innhold

Egenskapen med begrunnelse-innhold har fire verdier: flex-start for å justere elementer til venstre side av beholderen; flex-end for å justere elementene til høyre side; senter for å samkjøre med senteret; mellomrom for å justere elementer med lik avstand mellom dem, med de første og siste elementene på linje med containerkantene; og plass rundt for å justere flex-elementet med lik avstand rundt dem, inkludert de første og siste elementene. Flex-start er standardverdien.

  • Juster-elementer

Denne egenskapen har fem verdier: strekk for å skalere opp fleksible gjenstander for å fylle hele bredden eller høyden fra tverrstart til tverrenden av beholderen; flex-start for å stable gjenstander ved kryssstart; flex-end for å stable gjenstander i tverrenden; senter for å justere elementer mot midten av tverraksen; og baseline for å justere elementer slik at baselinjene er på linje. Strekk er standardverdien.

  • Align-innhold

Denne egenskapen justerer linjene i en flexbeholder når det er ekstra plass i tverraksen. Verdiene er: strekk for å fordele plass etter hver rad; flex-start for å stable gjenstander mot tvers igangsetting; flex-end for å stable gjenstander mot cross-enden; senter for å stable gjenstander i midten av tverraksen; mellomrom for å like fordele plass rundt fleksible elementer. Standardverdien er strekk.

Egenskaper for Flexbox - Egenskaper for fleksible varer

Nå som du vet om Flexbox-beholderegenskaper, la oss se på vareegenskapene:

  • Rekkefølge

Denne egenskapen kontrollerer rekkefølgen på utseendet til flexcontainerens barn. De bestilles som standard i flexcontaineren.

.flex-vare (

rekkefølge: ;

)

Du kan ordne fleksible elementer uten å måtte omstrukturere HTML-koden. Standardverdien er null.

  • Align-selv

Denne egenskapen gjør det mulig å overstyre standardinnstillingen for et spesifikt flexelement. Du kan bruke verdiene fra justeringselementer for denne egenskapen.

.flex-vare (

align-self: auto | flex-start | flex-end | sentrum | grunnlinje | tøye ut;

)

Den automatiske verdien i align-self blir beregnet av verdien av align-elementene på elementets overordnede. Hvis elementet ikke har noen overordnet, brukes strekningen i stedet.

Grunnleggende eksempler

Det er alt du trenger å vite for å bruke CSS Flexbox-rutenettet. Nå er det på tide å øve på det du lærte. Her er noen eksempler som viser hvordan alle disse egenskapene kommer sammen. La oss begynne med noe helt enkelt:

foreldre (

skjerm: flex;

høyde: 300px;

)

.child (

bredde: 100px;

høyde: 100px;

margin: auto;

)

Dette er et eksempel på perfekt sentrering. Verdiene for høyde og bredde kan endres slik du ønsker. Nøkkelen her er å sette margen til 'auto' slik at flexbeholderen automatisk tar opp ekstra plass. Enkelt nok!

La oss nå gå videre til å legge til noen flere egenskaper: en liste med seks elementer med faste dimensjoner som kan brukes automatisk. De må fordeles jevnt til den horisontale aksen.

.flex-container (

skjerm: flex;

rettferdiggjøre-innhold: plass-rundt;

)

La oss deretter prøve å sentrere en høyre justert navigasjon for mellomstore skjermer, og gjøre den enkeltkolonne på små enheter.

/* Stor */

.navigation (

skjerm: flex;

flex-flow: radomslag;

rettferdiggjøre-innhold: flex-end;

)

/ * Medium skjermer * /

@media all og (maks. bredde: 800 piksler) (

.navigation (

rettferdiggjøre-innhold: plass-rundt;

)

)

/ * Små skjermer * /

@media all og (maks. bredde: 500 piksler) (

.navigation (

flex-retning: kolonne;

)

)

På tide å ta dette et skritt videre! La oss prøve en mobil-første layout med tre kolonner, med bunntekst og topptekst i full bredde og uavhengig av kildesrekkefølge.

. wrapper (

skjerm: flex;

flex-flow: radomslag;

)

/ * Vi ber alle elementene være 100% bredde * /

.header, .main, .nav, .aside, .footer (

flex: 1 100%;

)

/ * Vi er avhengige av kildebestilling for mobil-første tilnærming * /

/ * Medium skjermer * /

@media alle og (min. bredde: 600 piksler) (

.aside (flex: 1 auto; )

)

/ * Store skjermer * /

@media alle og (min. bredde: 800 piksler) (

.main (flex: 2 0px; )

.aside-1 (rekkefølge: 1; )

.main (rekkefølge: 2; )

.aside-2 (rekkefølge: 3; )

.footer (ordre: 4; )

)

Konklusjon

Dette er bare noen grunnleggende eksempler. Du kan spille mye mer med CSS Flexbox-rutenettoppsett, og de er helt uvurderlige hvis du vil lage en responsiv webside.

Anbefalte artikler

Så her er noen artikler som vil hjelpe deg med å få mer detalj om flexbox-egenskapene, flexbox-koden og også om css flexbox-rutenettet, så bare gå gjennom lenken som er gitt er gitt nedenfor.

  1. HTML vs XML - Topp forskjeller
  2. CSS3 vs CSS - Hvordan er de forskjellige? (Infograph)
  3. HTML vs CSS Toppforskjeller
  4. HTML5 vs Flash

Kategori:

Nettutviklingsverktøy