CSS units og Flexbox

Laget av Camilla Larsen

Process

1

Spørsmål før vi begynner forelesning

- PX

- %

- vw / vh

- Rem

- Em

2

Units

3

Flexbox systemet

Units

  • PX

- Pixler vil ikke variere basert på en parent. Er fint for å sette faste størrelser som på en button eller boks, men er ikke så responsivt.

 

  • %

- vil variere avhengig av parent. Er responsivt.

 

  • vw / vh

- vw/vh vil variere avhengig av skjermstørrelse- ikke parent. Er responsivt i forhold til skjermstørrelse.

Units

REM

- R står for root. REM setter størrelse og er responsivt- basert på ROOT font-størrelsen i html-dokumentet.
Default størrelse i root er 16px.

 

16px = 1rem, men mindre vi setter en annen størrelse i root

 

EM

- EM setter størrelse og er responsivt- basert på font-størrelsen satt i sin parent.

Hva er det jeg mener når jeg snakker om flexbox?

The flexible box module

The flexible box layout

  • Hjelper oss å bygge opp layouten av en side ved hjelp av ulike teknikker, denne metoden er også responsiv.
  • Eksempler på løsninger som benytter flexbox og hvordan det hjelper oss:

    - https://medium.com/@merveyuksek/webpage-layout-examples-with-flexbox-88287f010a08

    - https://blog.duda.co/flexbox-examples

The flex container

• For å sette igang flexbox systemet og definere en container som et flex element bruker vi Display: flex;

• Når boksen har blitt definert som flexbox, så blir alle under-elementene automatisk definert som flex-items

• Flex-itemsene vil få en default position som er row.

• Se neste slide for å se hvordan det fungerer

Hvordan skifte retning på flex containere

• Vi har ulike retninger å sette flex-containeren

 

• Row (default)

• Row-reverse

• Column

• Column-reverse

Flex-direction

Flex-wrap

Flex-wrap

Flex-flow

•Vi kan kombinere flex-direction og flex-wrap ved å bruke flex-flow

•Første delen vi spesifiserer i flex-flow er flex-direction

•Den andre delen vi spesifiserer i flex-flow er flex-wrap

Main and cross axis

Hjelper oss med å definere hvilken retning flexbox systemet fokuserer på, og hvordan vi styrer retningen.

The Main Axis

The Cross Axis

Align Items

• Align items justerer på elementene på cross axis
 

• Stretch (default)

• Flex-start

• Flex-end

• Center

• Baseline

Align Items

Align Items

Justify Content

.container {
  display: flex;
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Flexbox gap​​​​​​​

Flex-grow

• Med default, så står flex-grow til 0

• Når vi legger til flex-grow: 1, så vil boksene automatisk fylle ut raden

• Flex-grow overkjører width

Flex-shrink

  • Vi kan definere hvor om boksene skal krympe tilpasset hovedboksen
  • Hovedsakelig bruker vi flex-shrink til å definere hvilke bokser vi ikke vil skal krympe
  • Defalut er flex-shrink: 1;
  • Dette betyr at de kommer til å krympe og tilpasse seg, med mindre du sier noe annet.


Oppgave

Ta opp den gamle superhelt oppgaven deres, og oppdater oppgaven med nye units og flexbox systemet.

CSS units og flexbox

By Camilla Larsen

CSS units og flexbox

  • 248

More from Camilla Larsen