Mekgobo

Bathuši ba shorthand bao ba agago godimo ga didirišwa tša rena tša flexbox go dira gore peakanyo ya dikarolo e be ka lebelo le bonolo go feta le ge e le neng pele.

Letlakaleng le

Mekgobo e fana ka tsela e kopana ya go diriša palo ya dithoto tša flexbox go hlama dipeakanyo ka pela le gabonolo ka go Bootstrap. Mokitlana ka moka wa kgopolo le phethagatšo o ya go projeke ya Pylon ya mohlodi wo o bulegilego .

Dihlogo godimo! Thekgo ya didirišwa tša sekgoba ka flexbox e sa tšwa go okeletšwa go Safari, ka fao nagana ka go netefatša thekgo ya gago ya sephephediši yeo o e reretšego. Peakanyo ya keriti ga se ya swanela go ba le ditaba. Bala ka botlalo .

Tsepamego

Šomiša .vstackgo hlama dipeakanyo tša go ema thwii. Dilo tše di kgobokeditšwego ke bophara bjo bo tletšego ka go ikemela. Šomiša .gap-*didirišwa go oketša sekgoba magareng ga dilo.

Ntlha ya pele

Ntlha ya bobedi

Ntlha ya boraro

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

Rapamego

Diriša .hstackbakeng sa dipeakanyo tše di rapaletšego. Dilo tše di kgobokeditšwego di tsepame thwii ka go ikemela gomme di tšea fela bophara bja tšona bjo bo nyakegago. Šomiša .gap-*didirišwa go oketša sekgoba magareng ga dilo.

Ntlha ya pele

Ntlha ya bobedi

Ntlha ya boraro

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

Go šomiša didirišwa tša mošito wa go rapalala go swana .ms-autole bjalo ka diphapano:

Ntlha ya pele

Ntlha ya bobedi

Ntlha ya boraro

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

Le ka melao e emeng : .

Ntlha ya pele

Ntlha ya bobedi

Ntlha ya boraro

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

Mehlala

Šomiša .vstackgo kgoboketša dikonope le dielemente tše dingwe:

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

Hlama foromo ya ka gare ga mothaladi ka .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;
}