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.