Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

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