Ibirindiro

Abafasha ba Shortand bubaka hejuru ya flexbox yingirakamaro kugirango ibice bigize ibice byihuse kandi byoroshye kuruta mbere.

Kuriyi page

Stacks itanga shortcut yo gukoresha umubare wimiterere ya flexbox kugirango byihuse kandi byoroshye gukora imiterere muri Bootstrap. Inguzanyo zose kubitekerezo no kubishyira mubikorwa bijya kumugaragaro umushinga wa Pylon .

Umutwe! Inkunga yibikorwa byingirakamaro hamwe na flexbox iherutse kongerwa muri Safari, tekereza rero kugenzura inkunga yawe igenewe. Imiterere ya gride ntigomba kugira ibibazo. Soma byinshi .

Uhagaritse

Koresha .vstackkugirango uhagarike imiterere. Ibintu byegeranye ni ubugari-bwuzuye kubusanzwe. Koresha .gap-*ibikoresho kugirango wongere umwanya hagati yibintu.

Ikintu cya mbere

Ingingo ya kabiri

Ingingo ya gatatu

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>

Uhagaritse

Koresha .hstackimiterere itambitse. Ibintu byashyizwe hamwe bihagaritse hagati yubusa kandi bifata ubugari bukenewe gusa. Koresha .gap-*ibikoresho kugirango wongere umwanya hagati yibintu.

Ikintu cya mbere

Ingingo ya kabiri

Ingingo ya gatatu

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>

Gukoresha horizontal margin yingirakamaro nka .ms-autospacers:

Ikintu cya mbere

Ingingo ya kabiri

Ingingo ya gatatu

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>

Kandi hamwe namategeko ahagaritse :

Ikintu cya mbere

Ingingo ya kabiri

Ingingo ya gatatu

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>

Ingero

Koresha .vstackgutondekanya buto nibindi bintu:

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>

Kora urupapuro rwerekana umurongo hamwe na .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;
}