Tari

Mataimakan gajerun hannu waɗanda ke yin gini a saman kayan aikin mu na flexbox don yin shimfidar sassa cikin sauri da sauƙi fiye da kowane lokaci.

A wannan shafi

Stacks suna ba da gajeriyar hanya don amfani da adadin kaddarorin flexbox don ƙirƙirar shimfidu cikin sauri da sauƙi a cikin Bootstrap. Dukkan yabo don ra'ayi da aiwatarwa yana zuwa ga aikin buɗe tushen Pylon .

A kula! Taimako don abubuwan amfani da tazara tare da flexbox an ƙara kwanan nan zuwa Safari, don haka la'akari da tabbatar da tallafin burauzar da kuke so. Tsarin grid bai kamata ya sami matsala ba. Kara karantawa .

A tsaye

Yi amfani .vstackdon ƙirƙirar shimfidu a tsaye. Abubuwan da aka tara suna cike da faɗin ta tsohuwa. Yi amfani .gap-*da kayan aiki don ƙara sarari tsakanin abubuwa.

Abu na farko

Abu na biyu

Abu na uku

html

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

A kwance

Yi amfani .hstackda shimfidu a kwance. Abubuwan da aka tara suna a tsaye a tsakiya ta tsohuwa kuma suna ɗaukar faɗin dole ne kawai. Yi amfani .gap-*da kayan aiki don ƙara sarari tsakanin abubuwa.

Abu na farko

Abu na biyu

Abu na uku

html

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

Amfani da abubuwan amfani a kwance a kwance kamar masu sarari .ms-auto:

Abu na farko

Abu na biyu

Abu na uku

html

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

Kuma tare da ka'idoji na tsaye :

Abu na farko

Abu na biyu

Abu na uku

html

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

Misalai

Yi amfani .vstackda maɓalli da sauran abubuwa:

html

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

Ƙirƙiri fom na layi tare da .hstack:

html

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