En visuel guide til CSS Flexbox

Hvad er CSS Flexbox?

I henhold til MDN-webdokumenterne:

”CSS Flexible Box Layout er et CSS-modul, der definerer en CSS-boxmodel, der er optimeret til design af brugergrænsefladen og layoutet af emner i en dimension. I flex-layoutmodellen kan børnene i en flexcontainer lægges ud i alle retninger og kan "bøje" deres størrelser, enten vokse til at udfylde ubrugt rum eller krympe for at undgå at oversvømme forældrene. Både vandret og lodret tilpasning af børnene kan let manipuleres. ”

Så for at opsummere er det et layoutmodul, der gør tingene nemmere at justere og fordele plads mellem genstande i en container.

Lad os se hurtigt på et par eksempler på, hvad der kan gøres med mindst 1–2 linjekoder ved hjælp af CSS flexbox:

Vandret justeringslayout:

Lodret justeringslayout:

Det er ret sejt i betragtning af, at der kun kræves en eller to linjer CSS for at manipulere layoutet inde i hver container.

Det grundlæggende

Flexbox-egenskaber kan kategoriseres i to hovedtyper:

  1. Beholderegenskaber (flex-retning, flex-wrap, justify-content, align-items, align-content)
  2. Flex Item egenskaber (rækkefølge, flex, flex-grow, flex-shrink, align-self)

Skærm: flex

Den første egenskab er ikke specifik for flexbox. Det egenskab er display, som vi sat til værdien: flex. Dette indstilles på beholderen, som indeholder de emner, vi vil manipulere.

Lad os tilføje nogle visuals for at forstå, hvordan det fungerer:

Hvis vi oprindeligt har en container med 3 kasser ( div) indeni. Sådan vil de se ud:

Lad os nu tilføje flextil containeren:

Bare en linje af CSS har ændret layoutet fra lodret retning til vandret.

Vigtige terminologier omkring Flexbox

Disse terminologier vil blive brugt i hele denne vejledning.

  1. Flex Container: Dette refererer til den container, der er display: flex;sat til den.
  2. Flex-emne: Dette er de enkelte børn inde i Flex Container
  3. Hovedakse : Som standard er det indstillet fra venstre mod højre.
  4. Tværakse : Som standard er det indstillet fra top til bund.

Så snart den display: flexer sat på en container, vil disse imaginære akser arbejde sammen for at bestemme, hvordan flex-emnerne inde i flexcontaineren skal bevæge sig og opføre sig. Disse to akser skifter retning, når vi ændrer visse flexbox-egenskaber, som diskuteres nedenfor.

Flex-retning

Denne egenskab bestemmer retningen af ​​de imaginære akser. Akserne bestemmer igen, hvordan emnerne i flexcontaineren skal placeres. Det tager følgende 4 værdier:

  1. rower standardværdien for hovedaksen, der peger fra venstre mod højre. Tværaksen forbliver fra top til bund.
  2. row-reversevender retningen for rækken fra højre til venstre. Igen er tværaksen upåvirket.

3. columnskifter hovedaksen fra den vandrette akse til den lodrette akse. Det betyder, at hovedaksen nu flyder fra top til bund, mens tværaksen nu flyder fra venstre mod højre.

4. column-reversesvarer til søjleværdien, hvor den eneste forskel er, at hovedaksen nu strømmer fra bund til top.

Flex-wrap

Flexcontaineren tillader som standard ikke varer at tage flere linjer i træk. I stedet for bliver alle emnerne klemt for at passe ind i en række, det vil sige, det tillader ikke indpakning i flere linjer.

  1. flex-wrap: no-wrap er standard.

2 flex-wrap: wrap.. Ved at ændre denne egenskab til wrapkan vi nu sikre, at hver flex-vare holder deres respektive størrelser. Hvis de ikke kan passe på en linje, vikles de ind i en næste række eller kolonne afhængigt af flexretningen.

Hvis flexretningen er indstillet til at vende tilbage, går emnerne til næste række startende fra højre til venstre.

3. vil wrap-reversepå den anden side vikle den næste række flex-elementer over den oprindelige, stadig fra venstre mod højre.

Retfærdiggør-indhold

Denne egenskab bruges meget ofte. Dens formål er at fordele rummet mellem flex-genstande i en flex-container langs hovedaksen . Standardværdien er indstillet til flex-start.

Husk: Hvis flexretning er indstillet til kolonne, vil hovedaksen nu flyde fra top til bund. Det betyder, at retfærdiggør-indhold nu distribuerer varerne vertikalt.

Juster-elementer

Denne ejendom er lige så populær som justify-contentog bruges regelmæssigt med flexbox. Det gør det samme som justify-contentmed den eneste forskel, at det fungerer langs tværaksen . Standardværdien for align-itemser stretch.

Husk: Hvis flexretning er indstillet til kolonne, vil tværaksen nu flyde fra venstre mod højre. Det betyder, at align-items nu distribuerer varerne vandret.

Juster-indhold

Denne egenskab ligner og kan let forveksles med align-items. Formålet med denne egenskab er at bestemme, hvordan mellemrum mellem rækker i en flexcontainer skal fordeles langs tværaksen .

Mens align-itemsmålretter mellemrum mellem flex-elementer, align-contentmålretter rækker mellem elementerne. Standardværdien for align-contenter stretch.

Egenskaber for flex-vare

Tid til at gå videre til den anden type flexbox-egenskaber, som giver os mulighed for at målrette mod de enkelte genstande inde i en flexcontainer.

Juster selv

Denne egenskab giver dig mulighed for at justere et individuelt flex-element langs tværaksen. Det tilsidesætter justeringen, der er indstillet til containeren igennem align-items.

Det tager også de samme egenskaber som align-items(se ovenfor).

Bestille

Denne egenskab giver os mulighed for at ombestille placeringen af ​​individuelle flex-genstande inden i deres flex-container. Som standard har alle varer en værdi på 0 tildelt dem.

Ved at tildele en værdi lavere (-ve) eller større (+ ve) igennem orderpå de enkelte poster, flytter det specifikke element sig til at blive positioneret i henhold til deres værdier.

Rækkefølgen følger den mest logiske konvention, det vil sige -ve, 0, + ve. Det laveste tal går længst til venstre og det største tal længst til højre, forudsat at alt andet er indstillet som standard. Hvis der er emner, der ikke er tildelt nogen ny værdi, forbliver de som 0.

Bemærk: Kasserne 1, 2, 5 og 6 i eksemplet ovenfor er alle stadig ved standardværdien på 0. For at afklare har de seks kasser ovenfor følgende værdier: -1, 0, 0, 0, 0, 1 .

Hvis du vil placere en boks foran boks nummer 4, skal du indstille din målrettede boks til en rækkefølge på -2 eller lavere.

Flex-basis, Flex-grow og Flex-Shrink

Indtil videre var alle flex-elementerne ens i størrelse. Lad os nu se på, hvordan vi kan få et specifikt flex-element til at tage mere plads inde i en flex-container sammenlignet med de andre ting inde i den samme container.

Flex-basis

Denne egenskab specificerer den ideelle størrelse af et flex-element, inden det placeres i en flex-container. Det fungerer på samme måde som bredden, når du arbejder med rækker. Det fungerer som højde, når du arbejder med søjler. Så hvis vi arbejder med søjler, og en vare har fået både højde og flex-basis, vil flex-basis have prioritet, da det er den ideelle højde, som en flex-element vil tage, hvis der er plads nok.

Når det er sagt, hvis der ikke er plads nok, og der ikke er tildelt nogen højde eller bredde til varerne. Varerne vil tage den maksimale eller maksimale bredde, der er tilgængelig i containeren.

Flex-Grow

Denne egenskab bestemmer, hvordan flex-elementerne kan vokse for at udfylde det ubrugte rum i en flex-container.

Hvis vi tildeler a flex-grow: 1til alle felter, tager de alle den resterende plads jævnt, hvilket også er standardværdien. Nummeret kan være hvad som helst, så længe de alle er det samme nummer.

Hvis vi giver flex-grow: 1til en vare og giver en anden en flex-grow: 2, så tager den anden vare to gange så meget ubrugt plads i forhold til den første.

Dette gælder både rækker og kolonner.

Flex-krympning

Denne egenskab bestemmer, hvordan flex-elementerne kan krympe, når der ikke er nok plads i en flex-container.

Dette flex-shrink: 1er standardværdien, hvilket betyder at alle emner krymper med samme hastighed som standard.

Bemærk:flex-shrink: 0; betyder, at denne specifikke vare aldrig skal krympe.

flex-shrink: 2; betyder, at denne specifikke vare skal krympe hurtigere end de andre på flex-shrink: 1;

Flex

Dette er stenografiversionen til flex-grow, flex-shrink og flex-basis i den bestemte rækkefølge.

Hvis du har brug for alle de tre ovenstående, kan du bare bruge noget som dette:

flex: 0 2 200px; hvor 0 refererer til flex-grow, 2 refererer til flex-shrink og 200 pix refererer til henholdsvis flex-basis.

Tillykke!

Det er det! Dette er nøgleingredienserne til at blive flexmester. Og som for alle andre ting i livet og i kode, gør praksis perfekt. Jeg anbefaler stærkt at sætte denne vejledning i praksis for at få en praktisk forståelse. Et eksempel kan være at starte med noget lille som en simpel navigationslinje.

Du kan også tjekke linket til min Codepen-samling på flex-box, som jeg brugte til at oprette disse flexboxes i ovenstående billeder og finjustere dem for at se, hvordan de ændres.

Tak fordi du læste denne vejledning på flexbox. Jeg håber, at det var nyttigt og informativt. Hvis du har spørgsmål eller vil dele dine tanker om dette emne, er du velkommen til at nå ud gennem kommentarfeltet eller via e-mail på [email protected]

Hvis du fandt dette læst værdifuldt, skal du vise denne artikel noget kærlighed ved at efterlade nogle klapper bag, så andre udviklere også kan finde den.

ZeeshaanMaudar - Oversigt

Kode for sjov Kode til forandring Kode for socialt gode - ZeeshaanMaudar github.com