Stacks ƒe ƒuƒoƒo

Kpekpeɖeŋunu kpui siwo tua míaƒe flexbox dɔwɔnuwo tame be woana akpa ƒe ɖoɖowɔwɔ nawɔ dɔ kabakaba eye wòanɔ bɔbɔe wu tsã.

Le axa sia dzi

Stacks na mɔ kpui aɖe na flexbox ƒe nɔnɔme geɖe zazã atsɔ awɔ ɖoɖowo kabakaba eye wòanɔ bɔbɔe le Bootstrap me. Kafukafu katã ɖe susua kple edziwɔwɔ ta yi na Pylon dɔ si wowɔ le mɔ gbadza nu la gbɔ .

Tawo yi dzi! Wotsɔ kpekpeɖeŋu na gap utilities kple flexbox kpe ɖe Safari ŋu nyitsɔ laa, eyata bu eŋu kpɔ be yeaɖo kpe wò web-browser ƒe kpekpeɖeŋu si nèɖo be yeawɔ dzi. Mele be nya aɖeke nanɔ grid ƒe ɖoɖowɔwɔ ŋu o. Xlẽ nu geɖe .

Tsi tsitre

Zãe nàtsɔ .vstackawɔ ɖoɖo siwo le tsitrenu. Nusiwo woƒo ƒu ɖekae nye kekeme bliboa le gɔmedzedzea me. Zã .gap-*dɔwɔnuwo nàtsɔ akpe ɖe nuawo dome.

Nu gbãtɔ

Nu evelia

Nu etɔ̃lia

<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>

Si mlɔ anyi

Zãe .hstackna ɖoɖo siwo le tsia dzi. Nusiwo woƒo ƒu ɖe wo nɔewo dzi la nɔa titina le tsitrenu le gɔmedzedzea me eye woƒe kekeme si hiã koe woxɔna. Zã .gap-*dɔwɔnuwo nàtsɔ akpe ɖe nuawo dome.

Nu gbãtɔ

Nu evelia

Nu etɔ̃lia

<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>

Zã horizontal margin utilities abe .ms-autoabe spacers ene:

Nu gbãtɔ

Nu evelia

Nu etɔ̃lia

<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>

Eye kple se siwo le tsitrenu la :

Nu gbãtɔ

Nu evelia

Nu etɔ̃lia

<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>

Kpɔɖeŋuwo

Zãe nàtsɔ .vstackaƒo abɔtawo kple nu bubuwo nu ƒu ɖekae:

<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>

Wɔ agbalẽvi si le fli me kple .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 ƒe nyawo

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