Vad är Flexbox och hur centrerar du innehål med det?

Question

Accepted Answer

**Flexbox** är ett endimensionellt layoutsystem — det arrangerar objekt i en enda **rad** eller **kolumn** och fördelar utrymme längs den linjen. Det är det moderna svaret på justering och avståndsproblem som tidigare krävde floats och hackar.

```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 två axlarna

Flexbox har en **huvudaxel** (riktningen items flödar) och en **tvärgående axel** (vinkelrätt). Egenskaperna mappas till dem:

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

## Perfekt centrering — det berömda användningsfallet

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

Dessa tre rader centrerar ett barn både horisontellt och vertikalt — en uppgift som var notoriskt svår före Flexbox.

## Vanliga mönster

```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` alternativ inkluderar `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Varför det spelar roll

Flexbox är det vardagliga verktyget för navigationsbarer, knappgrupper, kortrad, centrering och alla "rad av objekt"-layouter.

Att förstå huvudaxel/tvärgående axel-modellen (och att `justify-content`/`align-items` byter betydelse när du ändrar `flex-direction`) är den nyckelmentala modellen.

Använd Flexbox för 1D-layouter och Grid för 2D.