Τι ελέγχει η ιδιότητα display;

Question

Accepted Answer

`display` είναι μία από τις πιο θεμελιώδεις ιδιότητες CSS — ελέγχει **πώς ένα στοιχείο δημιουργεί ένα κουτί** και πώς τα παιδιά του διατάσσονται.

```css
.a { display: block; }        /* full width, starts new line (div, p, section) */
.b { display: inline; }       /* flows in text, ignores width/height (span, a) */
.c { display: inline-block; } /* flows inline BUT respects width/height/margins */
.d { display: none; }         /* removed entirely — no space, not rendered */
.e { display: flex; }         /* flex container — 1D layout for children */
.f { display: grid; }         /* grid container — 2D layout for children */
```

## Εξωτερική vs εσωτερική εμφάνιση

`display` στην πραγματικότητα ορίζει δύο πράγματα: πώς το κουτί συμπεριφέρεται **έξω** (block/inline) και πώς διατάσσει τα **παιδιά** του **μέσα** (flow/flex/grid). `display: flex` σημαίνει "αυτό το κουτί είναι επίπεδο μπλοκ, και τα παιδιά του είναι στοιχεία flex."

## display: none vs visibility: hidden

```css
.gone   { display: none; }        /* removed from layout — takes NO space */
.hidden { visibility: hidden; }    /* invisible but STILL occupies its space */
```

Μια βασική διάκριση: `display: none` καταρρέει τη διάταξη (και το κρύβει από τα προγράμματα ανάγνωσης οθόνης)· `visibility: hidden` αφήνει ένα κενό όπου ήταν το στοιχείο. Χρησιμοποιήστε `display: none` για πραγματική αφαίρεση, `visibility: hidden` για απόκρυψη διατηρώντας τη διάταξη.

## Τα άλογα εργασίας διάταξης

```css
.container {
  display: flex;          /* lay children in a row/column (one dimension) */
  gap: 1rem;
}
.grid {
  display: grid;          /* lay children in rows AND columns (two dimensions) */
  grid-template-columns: repeat(3, 1fr);
}
```

Η σύγχρονη διάταξη είναι κατασκευασμένη σχεδόν εξ ολοκλήρου στο `flex` (1D — σειρές ή στήλες) και `grid` (2D — σειρές και στήλες μαζί).

## Γιατί είναι σημαντικό

`display` καθορίζει τη συνολική συμπεριφορά διάταξης ενός στοιχείου.

Η γνώση block vs inline vs inline-block εξηγεί την προεπιλεγμένη ροή· `flex`/`grid` είναι ο πυρήνας της σύγχρονης διάταξης· και η διάκριση μεταξύ `none` και `visibility` είναι μια ιδιότητα που δοκιμάζεται συχνά και είναι πρακτικά σημαντική.