Τι είναι το Flexbox και πώς κεντράρεις περιεχόμενο μαζί του;

Question

Accepted Answer

Το **Flexbox** είναι ένα μονοδιάστατο σύστημα διάταξης — τακτοποιεί στοιχεία σε μία ενιαία **σειρά** ή **στήλη** και κατανέμει χώρο κατά μήκος αυτής της γραμμής. Είναι η σύγχρονη απάντηση σε προβλήματα ευθυγράμμισης και απόστασης που κάποτε απαιτούσαν floats και κόλπα.

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

## Οι δύο άξονες

Το Flexbox έχει έναν **κύριο άξονα** (την κατεύθυνση ροής των στοιχείων) και έναν **εγκάρσιο άξονα** (κάθετος). Οι ιδιότητες αντιστοιχούν σε αυτούς:

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

## Τέλειο κεντράρισμα — η διάσημη περίπτωση χρήσης

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

Αυτές οι τρεις γραμμές κεντράρουν ένα παιδί τόσο οριζόντια όσο και κάθετα — μια εργασία που ήταν περιδόξως δύσκολη πριν το Flexbox.

## Κοινά μοτίβα

```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` περιλαμβάνουν `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Γιατί έχει σημασία

Το Flexbox είναι το καθημερινό εργαλείο για γραμμές πλοήγησης, ομάδες κουμπιών, σειρές καρτών, κεντράρισμα και κάθε διάταξη "σειράς στοιχείων".

Η κατανόηση του μοντέλου κύριου/εγκάρσιου άξονα (και ότι `justify-content`/`align-items` ανταλλάσσουν νόημα όταν αλλάζεις `flex-direction`) είναι το βασικό νοητικό μοντέλο.

Χρησιμοποιήστε Flexbox για διατάξεις 1D και Grid για 2D.