Lær grundlæggende Flexbox på bare 10 minutter

Hvad er Flexbox?

Flexbox, forkortelse for "fleksibel boks", er en layouttilstand introduceret i CSS3, der bestemmer, hvordan elementer er arrangeret på en side, så de opfører sig forudsigeligt under forskellige skærmstørrelser og enheder.

Det kaldes Flexbox på grund af dets evne til at udvide og krympe elementer inde i flexboksen for bedst at udfylde den ledige plads. Sammenlignet med ældre layoutmetoder som displaytabel og flydende inline-blokke er Flexbox en mere kraftfuld måde at:

  • Læg elementer i forskellige retninger
  • Omarrangere skærmrækkefølgen for elementer
  • Skift justering af elementer
  • Monter elementerne dynamisk i beholderen

Hvornår skal jeg ikke bruge Flexbox?

Mens Flexbox er fantastisk til skalering, justering og ombestilling af elementer, så prøv at undgå at bruge den til:

  • overordnet sidelayout
  • websteder, der fuldt ud understøtter gamle browsere

Ældre browsere, som IE 11 eller derunder, understøtter ikke Flexbox eller kun delvis. Hvis du vil spille det sikkert, skal du falde tilbage til andre CSS-layoutmetoder, som display: inline-blockmed floatog display: table.

Men hvis du kun målretter mod moderne browsere, er Flexbox bestemt et kig værd.

Terminologi

I Flexbox-modellen er der tre kernekoncepter:

  • flex-genstande, de elementer, der skal lægges ud
  • flexcontainer, som indeholder flexartikler
  • flowretning, som bestemmer layoutretningen for flex-emner

Mennesker lærer bedst af erfaring og eksempler, så lad os starte!

Niveau 1 - Grundlæggende

1) Oprettelse af en flexcontainer

.flex-container { display: flex;}

For at oprette en flexcontainer skal du bare tilføje display: flexegenskaben til et element. Som standard betragtes alle direkte børn som fleksible genstande og er anbragt vandret i en enkelt række fra venstre til højre. Hvis den samlede bredde på flexartiklerne er større end containeren, skal emnerne skaleres ned, så de passer ind i containeren.

2) Sæt flex-emner i en enkelt kolonne

.flex-container { display: flex; flex-direction: column;}

Flex-genstande kan anbringes lodret ved indstilling flex-direction: column. Det er også muligt at lægge dem i omvendt rækkefølge ved at indstille flex-direction: column-reverseeller flex-direction: row-reverse.

.flex-container { display: flex; flex-direction: column-reverse;}

Niveau 2 - Begynder

1) Juster flex-genstande til højre

.flex-container { display: flex; justify-content: flex-end;}

Husk, at der er flexretning for hver Flexbox-model. justify-contentbruges til at specificere, hvor flex-emnerne skal placeres i flexretningen. I eksemplet ovenfor justify-content: flex-endbetyder genstande retfærdiggjort til enden af ​​flexcontaineren i vandret retning. Derfor er de placeret til højre.

2) Centrer-justere flex-emner

.flex-container { display: flex; justify-content: center;}

3) Spred flex-genstande

Du kan angive, hvor meget plads der skal vises mellem emner i en container ved hjælp af en af ​​tre mulige afstandsværdier for justify-contentejendommen:

  • space-evenly: mellemrummet mellem beholderens startkant og det første emne er lig med afstanden mellem hvert emne og det emne, der støder op til det.
  • space-between: mellemrummet mellem to tilstødende emner er det samme, men ikke nødvendigvis lig med mellemrummet mellem det første / sidste emne og dets nærmeste kant; mellemrummet mellem startkanten og det første element er lig med mellemrummet mellem slutkanten og det sidste element.
  • space-around: pladsen på hver side af en vare er den samme for hver vare i containeren. Bemærk, at dette betyder, at mellemrummet mellem to tilstødende emner vil være dobbelt så stort som mellemrummet mellem det første / sidste element og dets nærmeste kant.

4) Juster flex-emner i en anden retning

.flex-container { display: flex; justify-content: center; align-items: center;}

Normalt vil vi gerne lægge emner langs flexretningen, mens vi også justerer emnerne i retningen vinkelret på den. Ved at indstille justify-content: centerog align-items: centerkan flex-emner placeres i midten af ​​flexcontaineren både vandret og lodret.

5) Juster et bestemt flex-element

.flex-container { display: flex; align-items: center;}
.flex-bottom { align-self: flex-end;}

Det er muligt at justere et bestemt flex-element anderledes end de andre i containeren ved hjælp af align-selfCSS-egenskaben på det element.

Niveau 3 - Mellemliggende

1) Tillad, at flex-emner vikles ind i andre rækker / kolonner

.flex-container { display: flex; flex-wrap: wrap;}

Som standard er flex-elementer ikke tilladt at pakke, og de ændres til at passe ind i en enkelt række eller kolonne, hvis flexcontaineren ikke er stor nok til dem alle. Ved at tilføje flex-wrap: wrapbliver flex-emner, der overløber containeren, pakket ind i en anden række.

2) Omvendt indpakning

.flex-container { display: flex; flex-wrap: wrap-reverse;}

Flex-emner er stadig lagt ud i flere rækker, flex-wrap: wrap-reversemen de starter fra slutningen af ​​flexcontaineren.

3) Retfærdiggør placeringen af ​​elementernes linjer

.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start;}

Som standard strækkes rækker af flex-emner, der er pakket, for at optage al resterende plads med lige stor afstand mellem tilstødende rækker. Du kan indstille align-contentpå flexcontaineren for at bestemme placeringen af ​​rækker, når indpakning finder sted. Mulige værdier er flex-start, flex-end, center, space-between, space-aroundog stretch(standard).

Niveau 4 - Avanceret

1) Udvid elementer

.flex-container { display: flex;}
.flex-item.nth-of-type(1){ flex-grow: 1;}
.flex-item.nth-of-type(2) { flex-grow: 2;}

flex-growtræder kun i kraft, når der er plads tilbage i flexcontaineren. Den flex-growegenskab ved et flex punkt angiver, hvor meget en vare vil udvide i forhold til de andre elementer for at fylde den flex kassen. Standard er 1. Når indstillet til 0, vokser elementet overhovedet ikke til at udfylde den resterende plads. I dette eksempel er forholdet mellem to emner 1: 2, hvilket betyder at det første element vil tage op ⅓, mens det andet element vil tage ⅔ af den resterende plads.

2) Krymp elementer

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex-shrink: 1;}
.flex-item:nth-of-type(2) { flex-shrink: 2;}

flex-shrinktræder kun i kraft, når flex-emnerne overløber flexcontaineren på grund af utilstrækkelig plads. Det specificerer, hvor meget en vare krymper i forhold til de andre varer, for at varerne ikke overløber flexboksen. Standard er 1. Når indstillet til 0, krymper flex-elementet slet ikke. I dette eksempel er forholdet 1: 2, hvilket betyder, at det første element krymper med ⅓, mens det andet element krymper med ⅔ i det overfyldte rum.

3) Indstil størrelsen på elementerne

.flex-container { display: flex;}
.flex-item.nth-of-type(1) { flex-basis: 200px;}
.flex-item.nth-of-type(2) { flex-basis: 10%;}

I stedet for at bruge den oprindelige størrelse på et element kan du tilpasse størrelsen med flex-basis. Som standard er dens værdi flex-basis: auto, hvilket betyder størrelsen beregnet ud fra ikke-Flexbox CSS-regler. Du kan også indstille det til en absolut værdi eller en værdi, der repræsenterer en procentdel af flexcontaineren; for eksempel flex-basis: 200pxog flex-basis: 10%.

4) Sæt flex-grow, flex-shrink og flex-basis sammen

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex: 1 0 100px;}
.flex-item:nth-of-type(2) { flex: 2 0 10%;}

flexer en stenografi for flex-grow, flex-shrinkog flex-basis. I dette eksempel er det første flex-element indstillet til at væreflex-grow=1, flex-shrink=0,flex-basis=100px Og den anden flex element er indstillet til at væreflex-grow=2, flex-shrink=0,flex-basis=10% . I dette tilfælde, da der er plads tilbage i flexcontaineren, flex-growtager det kun effekter og flew-shrinkignoreres.

Konklusion

Flexbox er let at lære og manipulere. Kendskab til dets anvendelse er især nyttigt, da webudviklingscyklussen er kort og iterationer er hurtige. Hvis du gerne vil eksperimentere mere med Flexbox, inden du bruger den i dine projekter, kan du besøge Flexyboxes og Flexbox Froggy for at øve dig. Du kan også læse mere om CSS-trick: En guide til Flexbox og W3C: CSS Flexible Box.

Denne artikel blev oprindeligt offentliggjort på Altitude Labs 'blog og blev skrevet af vores softwareingeniør, Felix Yau. Altitude Labs er et softwarebureau, der specialiserer sig i personaliserede, mobil-første React-apps.