Cad é Flexbox agus conas a dhéanann tú ábhar a ionadú leis?

Question

Accepted Answer

**Flexbox** is córas leagan amach aontoiseach é — socruithe sé rudaí i **ró** amháin nó **colún** amháin agus dáileann sé spás ar feadh an líne sin. Is é an freagra nua-aimseartha a bhí ar fhéadfaí a bheith ann ar fhadhbanna ailínithe agus spásála a raibh gá le foluain agus cleachta ann cheana.

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

## An dá ais

Tá **ais phríomhúil** ag Flexbox (an treo ina bhíonn rudaí ag foluain) agus **ais dhomhainspéir** (ingearach). Tá na hairíonna mapáilte dóibh:

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

## Ionadú foirfe — an cás úsáide cáiliúil

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

Ionadaíonn na trí líne sin leanbh go leordhóthanach agus go hingearach araon — tasc ar bhí sé dothuigthe crua roimh Flexbox.

## Patrúin choitianta

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

Inclítear i roghanna `justify-content` `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Cén fáth a bhfuil sé tábhachtach

Is é Flexbox an uirlis gach lá do bharbhuillí, grúpaí cnaipe, sraitheanna cairt, ionadú, agus aon leagan amach "líne rudaí" ar bith.

Is é an eochair a thuiscint an tsamhail intinn ais phríomhúil/ais dhomhainspéir (agus go ndéanann `justify-content`/`align-items` athrú brí nuair a dhéanann tú `flex-direction` a athrú) .

Baineann úsáid as Flexbox do leagain amach 1D agus Grid do 2D.