Mikä on Flexbox ja kuinka keskität sisältöä sillä?

Question

Accepted Answer

**Flexbox** on yksiulotteinen asettelujärjestelmä — se järjestää elementit yhteen **riviin** tai **sarakkeeseen** ja jakaa tilaa kyseisen linjan varrella. Se on moderni ratkaisu tasaus- ja välilyöntiongelmiin, joita aikaisemmin vaativat float-tekniikkaa ja temppuja.

```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) */
}
```

## Kaksi akselia

Flexboxilla on **pääakseli** (suunta, jossa elementit virtaavat) ja **poikittaisakseli** (kohtisuora). Ominaisuudet kartoitetaan niihin:

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

## Täydellinen keskittäminen — kuuluisa käyttötapaus

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

Nämä kolme riviä keskittävät lapsen sekä vaakasuunnassa että pystysuunnassa — tehtävä, joka oli kuuluisasti vaikea ennen Flexboxia.

## Yleiset kuviot

```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` vaihtoehdot sisältävät `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Miksi sillä on merkitystä

Flexbox on jokapäiväinen työkalu navigointipalkeille, painikeryhmille, korttiriveille, keskittämiselle ja mihin tahansa "elementtirivi" asetteluun.

Pääakselin/poikittaisakselin mallin ymmärtäminen (ja että `justify-content`/`align-items` vaihtavat merkitystä, kun muutat `flex-direction`-ominaisuutta) on keskeinen ajattelumalli.

Käytä Flexboxia 1D-asetteluihin ja Gridiä 2D-asetteluihin.