Duubista
Caawiye-gacan-gaaban oo ka dul dhisma agabkayaga flexbox si ay u habeeyaan qaybaha ka dhaqso badan ugana fudud weligii.
Xirmooyinka waxay bixiyaan hab-gaab lagu dabaqo tiro ka mid ah guryaha flexbox si ay si deg deg ah oo fudud ugu abuuraan naqshado gudaha Bootstrap. Dhammaan ammaanta fikradda iyo hirgelinta waxay ku socotaa isha furan ee mashruuca Pylon .
Toosan
Isticmaal .vstack
si aad u abuurto jaantusyo toosan. Walxaha is dulsaaran waa balac buuxa ahaan. Isticmaal .gap-*
utility si aad ugu darto meel bannaan oo u dhaxaysa alaabta.
<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
U isticmaal .hstack
qaab-dhismeedka jiifka. Alaabooyinka is dulsaaran ayaa si toos ah udagsan oo kaliya waxay qaadanayaan ballacooda lagama maarmaanka ah. Isticmaal .gap-*
utility si aad ugu darto meel bannaan oo u dhaxaysa alaabta.
<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>
Isticmaalka utility margin siman sida .ms-auto
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>
Oo leh xeerar toosan :
<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>
Tusaalooyinka
Isticmaal .vstack
si aad u xidhid badhamada iyo walxaha kale:
<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>
Ku samee foom khadka tooska ah .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;
}