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.

Ntawm nplooj ntawv no

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 .

Tau taub hau! Kev them nyiaj yug rau qhov sib txawv nrog flexbox tsis ntev los no tau ntxiv rau Safari, yog li xav txog kev txheeb xyuas koj qhov kev txhawb nqa browser. Daim phiaj layout yuav tsum tsis muaj teeb meem. Nyeem ntxiv .

Ntsug

Siv .vstacklos 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.

Thawj yam khoom

Yam khoom thib ob

Yam thib peb

<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 .hstackrau 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.

Thawj yam khoom

Yam khoom thib ob

Yam thib peb

<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-autoli spacers:

Thawj yam khoom

Yam khoom thib ob

Yam thib peb

<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 :

Thawj yam khoom

Yam khoom thib ob

Yam thib peb

<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 .vstackcov 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;
}