Conas a oibríonn flex-grow, flex-shrink agus flex-basis?

Question

Accepted Answer

Rialann an triúr seo de fhearais ar **flex items** conas a roinnt siad spás feadh an ais phríomhúil. Cuimsíonn an giorrúchán `flex` iad.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## Gach airí mínithe

- **`flex-basis`** — méid idéalach/tosaigh an ghearáin feadh an ais phríomhúil (cosúil le `width` do a sraith). Úsáideann `auto` méid an ábhair.
- **`flex-grow`** — má tá *spás breise* ann, conas a fhéadfadh an ghearán seo a fhás go gréanmhar. `0` = ná fás; bíonn uimhreacha níos airde ag fás go comhréireach.
- **`flex-shrink`** — mura bhfuil *dóthain spáis* ann, conas a réasúnaíonn an ghearán seo a laghdú. `0` = ní laghdaigh riamh (d'fhéadfadh imeall a bheith ann); réamhshocrú `1` = laghdaigh de réir mar is gá.

## Fás comhréireach

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

Roinntear spás breise i gcomhréir na luachanna fáis, ní méideanna iomlán.

## Luachanna giorrúcháin coitianta

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

Deir `flex: 1` ar gach gearán colúin chothrom a chruthú; `flex: 0 0 250px` cruthú pánailt dhocht leasa geal in aice le ceann solúbtha.

## Leagan amach fíor: barr leataobh socraithe + ábhar foluain

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## Cén fáth a bhíonn sé tábhachtach

Is iad na fearais seo an tslí a rialann tú méadonú comhréireach i leaganacha foluain — colúin chothrom (`flex: 1`), pánailt socraithe-móide-foluain (`flex: 0 0 X` + `flex: 1`), agus cosc ar laghdú neamhtheastaithe (`flex-shrink: 0`).

Tuigint basis/grow/shrink a bhíonn ag athrú Flexbox ó "tá siad díreach ina suí ann" go smacht beacht, freagrach.