Switachi
Vapfuni va marito yo koma lava akaka ehenhla ka switirhisiwa swa hina swa flexbox ku endla leswaku layout ya swiphemu yi hatlisa no olova ku tlula rini na rini.
Switachi swi nyika ndlela yo koma yo tirhisa nhlayo ya swihlawulekisi swa flexbox ku hatlisa no olova ku tumbuluxa swivumbeko eka Bootstrap. Ku dzuneka hinkwako ka mhaka na ku tirhisiwa ku ya eka phurojeke ya Pylon ya xihlovo lexi pfulekeke .
Ololoka
Tirhisa .vstack
ku endla swivumbeko leswi yimisiweke. Swilo leswi hlanganisiweke swi ni ku anama loku heleleke hi ku tiyimisela. Tirhisa .gap-*
switirhisiwa ku engetela ndhawu exikarhi ka swilo.
<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>
Ololoka
Tirhisa .hstack
eka swivumbeko swa horizontal. Swilo leswi hlanganisiweke swi le xikarhi hi ndlela yo yima hi ku tiyimisela naswona swi teka ntsena ku anama ka swona loku lavekaka. Tirhisa .gap-*
switirhisiwa ku engetela ndhawu exikarhi ka swilo.
<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>
Ku tirhisa switirhisiwa swa margin ya horizontal ku fana na .ms-auto
as 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>
Naswona hi milawu leyi yimisiweke : .
<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>
Swikombiso
Tirhisa .vstack
ku hlanganisa swikomba-nkarhi ni swiaki swin’wana:
<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>
Endla fomo ya le ndzeni ka layini hi .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;
}