in English

Stacan

Luchd-cuideachaidh làmh-ghoirid a bhios a’ togail air na goireasan flexbox againn gus cruth phàirtean a dhèanamh nas luaithe agus nas fhasa na bha e a-riamh.

Air an duilleig seo

Bidh Stacks a’ tabhann slighe ghoirid airson grunn thogalaichean flexbox a chuir an sàs gus dealbhadh a chruthachadh gu sgiobalta agus gu furasta ann am Bootstrap. Tha a h-uile creideas airson a’ bhun-bheachd agus buileachadh a’ dol gu pròiseact stòr fosgailte Pylon .

Cinn suas! Chaidh taic airson goireasan beàrn le flexbox a chuir ri Safari o chionn ghoirid, mar sin smaoinich air dearbhadh an taic brabhsair a tha san amharc agad. Cha bu chòir duilgheadas sam bith a bhith ann an cruth clèithe. Leugh tuilleadh .

Inghearach

Cleachd .vstackgus dealbhadh dìreach a chruthachadh. Tha nithean cruachan làn-leud gu bunaiteach. Cleachd .gap-*goireasan gus àite a chuir eadar nithean.

A' chiad nì

An dara nì

An treas nì

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Cothromach

Cleachd .hstackairson dealbhadh còmhnard. Tha nithean cruachan stèidhichte gu dìreach gu bunaiteach agus chan eil iad a’ gabhail ach an leud riatanach. Cleachd .gap-*goireasan gus àite a chuir eadar nithean.

A' chiad nì

An dara nì

An treas nì

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

A’ cleachdadh goireasan iomaill chòmhnard .ms-automar spacers:

A' chiad nì

An dara nì

An treas nì

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Agus le riaghailtean dìreach :

A' chiad nì

An dara nì

An treas nì

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

Eisimpleirean

Cleachd .vstackgus putanan agus eileamaidean eile a chruachadh:

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

Cruthaich foirm in-loidhne le .hstack:

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

Sass

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}