Mekotla

Bathusi ba Shorthand ba ahang holim'a lisebelisoa tsa rona tsa flexbox ho etsa sebopeho sa likarolo kapele le ka bonolo ho feta pele.

Leqepheng lena

Li-stacks li fana ka tsela e khuts'oane ea ho sebelisa lisebelisoa tse ngata tsa flexbox ho theha meralo kapele le ha bonolo ho Bootstrap. Mokitlane oohle oa mohopolo le ts'ebetsong o ea morerong o bulehileng oa Pylon .

Hlokomela! Ts'ehetso bakeng sa lisebelisoa tsa lekhalo tse nang le flexbox e sa tsoa eketsoa ho Safari, kahoo nahana ka ho netefatsa ts'ehetso eo u e rerileng ea sebatli. Sebopeho sa grid ha sea lokela ho ba le mathata. Bala haholoanyane .

E otlolohileng

Sebelisa .vstackho etsa lipehelo tse otlolohileng. Lintho tse pakiloeng li na le bophara bo felletseng ka mokhoa oa kamehla. Sebelisa .gap-*lisebelisoa ho eketsa sebaka pakeng tsa lintho.

Ntho ea pele

Ntho ea bobeli

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

E tshekaletseng

Sebelisa .hstackbakeng sa meralo e tshekaletseng. Lintho tse phuthetsoeng li beiloe holimo ka ho sa feleng 'me li nka feela bophara bo hlokahalang. Sebelisa .gap-*lisebelisoa ho eketsa sebaka pakeng tsa lintho.

Ntho ea pele

Ntho ea bobeli

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

Ho sebelisa lisebelisoa tsa marang-rang tse otlolohileng joalo .ms-autoka li-spacers:

Ntho ea pele

Ntho ea bobeli

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

Mme ka melao e emeng :

Ntho ea pele

Ntho ea bobeli

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

Sebelisa .vstackho bokella likonopo le likarolo tse ling:

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

Theha foromo ea inline 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;
}