Pob
Shorthand pab uas tsim rau sab saum toj ntawm peb cov khoom siv hluav taws xob flexbox los ua cov txheej txheem kev teeb tsa sai dua thiab yooj yim dua puas tau.
Stacks muab ib qho shortcut rau kev siv ib tug xov tooj ntawm flexbox zog kom sai thiab yooj yim tsim layouts hauv Bootstrap. Tag nrho cov credit rau lub tswv yim thiab kev siv mus rau qhov qhib qhov project Pylon .
Ntsug
Siv .vstack
los tsim layouts ntsug. Cov khoom stacked yog tag nrho-dav los ntawm lub neej ntawd. Siv .gap-*
cov khoom siv los ntxiv qhov chaw ntawm cov khoom.
<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>
Kab rov tav
Siv .hstack
rau kab rov tav layouts. Cov khoom stacked yog vertically centered los ntawm lub neej ntawd thiab tsuas yog nqa lawv qhov dav dav. Siv .gap-*
cov khoom siv los ntxiv qhov chaw ntawm cov khoom.
<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>
Siv kab rov tav margin siv xws .ms-auto
li 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>
Thiab nrog txoj cai ntsug :
<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>
Piv txwv
Siv .vstack
cov pob khawm thiab lwm yam khoom:
<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>
Tsim ib daim ntawv inline nrog .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;
}