Milu
Othandizira a Shorthand omwe amamanga pamwamba pazida zathu za flexbox kuti apange masanjidwe azinthu mwachangu komanso mosavuta kuposa kale.
Stacks imapereka njira yachidule yogwiritsira ntchito zingapo za flexbox kuti mupange mwachangu komanso mosavuta masanjidwe mu Bootstrap. Ngongole zonse za lingaliro ndi kukhazikitsa zimapita ku polojekiti yotseguka ya Pylon .
Oima
Gwiritsani .vstack
ntchito kupanga masanjidwe ofukula. Zinthu zosanjikizidwa zimakhala ndi m'lifupi mwachisawawa. Gwiritsani .gap-*
ntchito zowonjezera kuti muwonjezere malo pakati pa zinthu.
<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>
Chopingasa
Gwiritsani .hstack
ntchito masanjidwe opingasa. Zinthu zosanjikizidwa zimakhazikika molunjika ndipo zimangotenga m'lifupi mwake. Gwiritsani .gap-*
ntchito zowonjezera kuti muwonjezere malo pakati pa zinthu.
<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>
Kugwiritsa ntchito zopingasa zopingasa ngati .ms-auto
ma 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>
Ndipo ndi malamulo ofukula :
<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>
Zitsanzo
Gwiritsani .vstack
ntchito kuyika mabatani ndi zinthu zina:
<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>
Pangani fomu yapaintaneti ndi .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;
}