Hva er Flexbox og hvordan sentrerer du innhold med det?

Question

Accepted Answer

**Flexbox** er et endimensjonalt layoutsystem — det ordner elementer i en enkelt **rad** eller **kolonne** og fordeler plass langs denne linjen. Det er det moderne svaret på justering- og avstandsproblemer som tidligere krevde floats og hacky løsninger.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## De to aksene

Flexbox har en **hovedakse** (retningen elementer flyter) og en **kryssakse** (vinkelrett). Egenskapene kartlegges til dem:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Perfekt sentrering — det berømte bruktilfellet

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Disse tre linjene sentrerer et barnelement både horisontalt og vertikalt — en oppgave som var notorisk vanskelig før Flexbox.

## Vanlige mønstre

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` alternativer inkluderer `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Hvorfor det er viktig

Flexbox er det daglige verktøyet for navigasjonsbarer, knappgrupper, kortrekker, sentrering, og enhver "linje av elementer" layout.

Å forstå hovedaksen/kryssaksen-modellen (og at `justify-content`/`align-items` bytter betydning når du endrer `flex-direction`) er den sentrale mentale modellen.

Bruk Flexbox for 1D-layouts og Grid for 2D.