Ebitundu

Shorthand helpers ezizimba waggulu ku flexbox utilities zaffe okufuula component layout eyangu era ennyangu okusinga bwe kyali kibadde.

Ku muko guno

Stacks ziwa shortcut ey'okukozesa omuwendo gw'ebintu bya flexbox okukola amangu era mu ngeri ennyangu layouts mu Bootstrap. Ekitiibwa kyonna eky'endowooza n'okussa mu nkola kigenda mu pulojekiti ya Pylon eya open source .

Emitwe gigulumivu! Obuwagizi bw’ebikozesebwa mu gap ne flexbox bwayongerwako gye buvuddeko ku Safari, kale lowooza ku kukakasa obuwagizi bwa bbulawuzi bwo bw’ogenderera. Grid layout tesaana kuba na nsonga yonna. Soma wano ebisingawo .

Okwesimba

Kozesa .vstackokukola ensengeka ezeesimbye. Ebintu ebitumbiddwa biba bya bugazi bujjuvu nga bwe kibadde. Kozesa .gap-*ebikozesebwa okwongera ekifo wakati w’ebintu.

Ekintu ekisooka

Ekintu ekyokubiri

Ekintu ekyokusatu

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>

Okwegolola

Kozesa .hstackku layouts eziwanvuye. Ebintu ebitumbiddwa bibeera wakati mu vertikal nga bwe biba bitwala obugazi bwabyo obwetaagisa bwokka. Kozesa .gap-*ebikozesebwa okwongera ekifo wakati w’ebintu.

Ekintu ekisooka

Ekintu ekyokubiri

Ekintu ekyokusatu

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>

Okukozesa ebikozesebwa mu horizontal margin nga .ms-autonga spacers:

Ekintu ekisooka

Ekintu ekyokubiri

Ekintu ekyokusatu

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>

Era nga balina amateeka aga vertical :

Ekintu ekisooka

Ekintu ekyokubiri

Ekintu ekyokusatu

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>

Eby’okulabirako

Kozesa .vstackokuteeka buttons n'ebintu ebirala:

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>

Tonda foomu eri mu layini nga olina .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 nga bwe kiri

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