Lær CSS Flexbox på 5 minutter - En tutorial til begyndere

En hurtig introduktion til det populære layoutmodul

I dette indlæg lærer du det grundlæggende i CSS Flexbox, som er blevet en must-have-færdighed for webudviklere og designere i de sidste par år.

Vi bruger et navbar som et eksempel, da dette er en meget typisk brugssag for Flexbox. Dette vil introducere dig til dets mest anvendte egenskaber ved modulet, mens du udelader dem, der ikke er så kritiske.

Jeg har også oprettet et gratis 12-delt kursus om Flexbox. Tjek det her, hvis du er interesseret!

Lad os nu komme i gang!

Dit første Flexbox-layout

De to hovedkomponenter i et Flexbox-layout er containeren og emnerne .

Her er HTML til vores eksempel, som indeholder en container med tre emner:

 Home Search Logout 

Før vi omdanner dette til et Flexbox-layout, vil elementerne blive stablet oven på hinanden sådan:

Jeg har tilføjet lidt styling, men det har intet at gøre med Flexbox.

Jeg har tilføjet lidt styling, men det har intet at gøre med Flexbox.

For at gøre dette til et Flexbox-layout giver vi simpelthen containeren følgende CSS-egenskab:

.container { display: flex; } 

Dette placerer elementerne automatisk pænt langs den vandrette akse.

Hvis du vil tjekke den aktuelle kode, kan du gå over til denne Scrimba-legeplads.

Lad os nu blande disse ting lidt rundt.

Retfærdiggør indhold og Juster emner

Justify-content and align-items er to CSS-egenskaber, som hjælper os med at distribuere elementerne i containeren. De styrer, hvordan emnerne placeres langs hovedaksen og tværaksen .

I vores tilfælde (men ikke altid) er hovedaksen vandret og tværaksen er lodret:

I denne artikel vil vi kun se på justify-content, da jeg har fundet ud af at bruge denne meget mere end align-items. Imidlertid forklarer jeg begge egenskaber i mit Flexbox-kursus detaljeret.

Lad os centrere alle elementerne langs hovedaksen ved hjælp af justify-content:

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

Eller vi kan indstille det til space-between, hvilket tilføjer plads mellem elementerne på denne måde:

.container { display: flex; justify-content: space-between; } 

Her er de værdier, du kan indstille til justify-content:

  • flex-start ( standard )
  • flex-ende
  • centrum
  • mellemrum
  • plads-rundt
  • plads-jævnt

Jeg vil anbefale dig at lege med disse og se, hvordan de spiller ud på siden. Det skulle give dig en ordentlig forståelse af konceptet.

Kontrol af et enkelt emne

Vi kan også styre enkelte elementer . Lad os sige, at vi for eksempel vil beholde de to første ting i venstre side, men flytte logoutknappen til højre side.

For at gøre dette bruger vi den gode gamle teknik til at indstille margenen til auto.

.logout { margin-left: auto; } 

Hvis vi ønsker, at både searchvaren og logoutvaren skal skubbes til højre, tilføjer vi simpelthen den margin-lefttil searchvaren i stedet.

.search { margin-left: auto; } 

Det skubber søgeelementet så langt til højre som muligt, hvilket igen skubber log ud-elementet med det:

Flex-ejendommen

Indtil videre har vi kun haft varer med fast bredde. Men hvad hvis vi vil have dem til at være lydhøre? For at opnå det har vi en ejendom kaldet flex. Det gør det meget nemmere end den gamle måde at bruge procenter på.

Vi målretter simpelthen alle elementerne og giver dem en flexværdi på 1.

.container > div { flex: 1; } 

Som du kan se, strækker det varerne for at fylde hele containeren.

I mange tilfælde vil du sandsynligvis have et af elementerne til at optage den ekstra bredde og derved kun indstille en af ​​dem til at have fleksibel bredde. Vi kan for eksempel få searchvaren til at optage al den ekstra plads:

.search { flex: 1; } 

Før vi afslutter denne artikel, vil jeg nævne, at flex-egenskaben faktisk er en stenografi af tre egenskaber: flex-grow , flex-shrink og flex-basis . At lære dem tager dog mere end fem minutter, så det er uden for omfanget af denne vejledning.

Hvis du er interesseret i at lære dem, forklarer jeg dog alle tre egenskaber grundigt i mit gratis Flexbox-kursus.

Nu hvor du har lært det grundlæggende, vil du helt sikkert være klar til at tage mit fulde kursus og blive en Flexbox-mester!

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.