CSS3 — Flexbox, Grid, responsive design, mediaqueries

It A · STX · A-niveau · Frontend og UX

💻 CSS3 — Flexbox, Grid, responsive design, mediaqueries

CSS3 (Cascading Style Sheets, 3. generation) = layout + design af HTML.

Tre layout-modeller:

1. Float (gammel, fra 90'erne — undgå nu).

2.

Flexbox (CSS3, 2009) — 1-dimensionel layout (række ELLER kolonne).

3.

Grid (CSS3, 2017) — 2-dimensionel layout (række OG kolonne).

Flexbox: definér container med display: flex. Egenskaber for container: flex-direction (row/column), justify-content (start/center/end/space-between), align-items (stretch/center/start/end), flex-wrap (nowrap/wrap). Egenskaber for elementer: flex-grow, flex-shrink, flex-basis.

Eksempel: .container { display: flex; justify-content: space-between; align-items: center; } — sætter elementer i en række med plads imellem + lodret centrering. Bruges til: navigations-menuer, kort-lister, formularer.

Grid: 2D-layout. display: grid. Definér rækker + kolonner: grid-template-columns: 1fr 2fr 1fr (3 kolonner med forhold 1:2:1). grid-template-rows: auto auto. grid-gap: 20px. Placering: grid-column: 1 / 3 (span 2 kolonner). Bruges til: hele side-layouts, dashboards, image-grids.

Sammenligning

Flexbox til UI-komponenter (1D). Grid til side-layouts (2D). Brug ofte begge sammen. Responsive design = layout der TILPASSER sig skærm-størrelse (mobil/tablet/desktop).

Tilgangen "mobile-first": design for mobil først, tilføj for større skærme.

Media queries: betinget CSS baseret på viewport.

Eksempel: `@media (min-width: 768px) { .container { flex-direc

Læringsmål

• Anvende Flexbox og Grid til at layoute en hjemmeside
• Anvende mediaqueries til responsivt design
• Tilpasse et design til forskellige skærmstørrelser

Sådan kan du arbejde med emnet

• Byg et responsivt layout med CSS Grid, der skifter fra en til tre kolonner ved 768px
• Brug Flexbox til at centrere et element vertikalt og horisontalt i en beholder
• Skriv en mediaquery, der ændrer skriftstørrelse og layout på skærme under 480px

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.