Stacks
Notae adiutrices quae super nostrae flexbox utilitates aedificant ut component extensionem citius ac facilius quam umquam efficiant.
Stacks offert brevem ad applicandas plures proprietates flexboxs ut cito et facile in Bootstrap layouts creet. All credit for the concept and implementation goes to open source Pylon project .
Vertical
Utere .vstack
verticali creare layout. Reclinant items sunt plena latitudo per defaltam. Utere .gap-*
utilitates addere spatio inter items.
<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>
Horizontal
Utere .hstack
ad layout horizontalem. Res reclinatae verticaliter per defaltam centra sunt et solum necessariam latitudinem capiunt. Utere .gap-*
utilitates addere spatio inter items.
<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>
Utens utilitates margine horizontali sicut .ms-auto
in spacers:
<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>
Et cum regulis verticalibus :
<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>
Exempla
Ad bullarum .vstack
acervum et alia elementa:
<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>
Forma inline cum crea .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;
}