Ką kontroliuoja display savybė?

Question

Accepted Answer

`display` yra viena iš svarbiausių CSS savybių — ji kontroliuoja **kaip elementas sugeneruoja lauką** ir **kaip jo vaikai yra išdėstomi**.

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

## Išorinis vs vidinis display

`display` iš tikrųjų nustato du dalykus: kaip langelis elgiasi **išorėje** (block/inline) ir kaip jis išdėsto savo **vaikus** viduje (flow/flex/grid). `display: flex` reiškia "šis langelis yra bloko lygio ir jo vaikai yra flex elementai".

## display: none vs visibility: hidden

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

Svarbi skirtumy: `display: none` sutraukia maketą (ir paslėpia iš ekrano skaitymo programų); `visibility: hidden` palikti tarpą, kuriame buvo elementas. Naudokite `display: none` kad visiškai pašalintumėte, `display: hidden` kad paslėptumėte išlaikydami maketą.

## Maketo darbininkai

```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);
}
```

Modernus maket beveik visiškai sukaitytas iš `flex` (1D — eilutės arba stulpeliai) ir `grid` (2D — eilutės ir stulpeliai kartu).

## Kodėl tai svarbu

`display` nustato viso elemento maketo elgesį.

Supratimas apie block vs inline vs inline-block paaiškina numatytąjį srautą; `flex`/`grid` yra šiuolaikinio maketo širdis; o `none` vs `visibility` skirtumas yra dažnai testuojamas ir praktiškai svarbus detalė.