Ba stacks ya kosala

Basungi ya stenographie oyo etongaka likolo ya ba utilitaires na biso ya flexbox mpo na kosala ete layout ya composant ezala mbangu mpe pete koleka liboso.

Na lokasa oyo

Ba stacks epesaka nzela mokuse mpo na kosalela motango ya ba propriétés ya flexbox mpo na kosala noki mpe na pete ba layouts na Bootstrap. Crédit nionso ya concept na mise en œuvre ekendaka na projet Pylon ya source ouverte .

Mitó likoló! Lisungi ya ba utilitaires ya gap na flexbox ebakisami kala mingi te na Safari, yango wana kanisá ko vérifier lisungi ya navigateur oyo olingi. Layout ya grille esengeli ezala na ba problèmes te. Tanga lisusu .

Ya kotelema

Salelá .vstackmpo na kosala ba layouts ya semba. Biloko oyo etandami ezali na bonene mobimba na ndenge ya libela. Salelá .gap-*ba utilitaires mpo na kobakisa esika kati na biloko.

Eloko ya liboso

Likambo ya mibale

Eloko ya misato

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

Ya kolala

Salelá .hstackmpo na ba layouts horizontales. Biloko oyo etandami ezali na katikati ya verticale na ndenge ya libela mpe ezwa kaka bonene na yango oyo esengeli. Salelá .gap-*ba utilitaires mpo na kobakisa esika kati na biloko.

Eloko ya liboso

Likambo ya mibale

Eloko ya misato

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

Kosalela ba utilitaires ya marge horizontale lokola .ms-autolokola ba espaceurs:

Eloko ya liboso

Likambo ya mibale

Eloko ya misato

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

Mpe na mibeko ya vertical :

Eloko ya liboso

Likambo ya mibale

Eloko ya misato

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

Bandakisa

Salelá .vstackmpo na kotya ba boutons mpe biloko mosusu:

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

Bosala formulaire ya inline na .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 oyo azali

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