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.
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 .
Ya kotelema
Salelá .vstack
mpo 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.
<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á .hstack
mpo 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.
<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-auto
lokola ba espaceurs:
<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 :
<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á .vstack
mpo 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;
}