Switachi

Vapfuni va marito yo koma lava akaka ehenhla ka switirhisiwa swa hina swa flexbox ku endla leswaku layout ya swiphemu yi hatlisa no olova ku tlula rini na rini.

Eka tluka leri

Switachi swi nyika ndlela yo koma yo tirhisa nhlayo ya swihlawulekisi swa flexbox ku hatlisa no olova ku tumbuluxa swivumbeko eka Bootstrap. Ku dzuneka hinkwako ka mhaka na ku tirhisiwa ku ya eka phurojeke ya Pylon ya xihlovo lexi pfulekeke .

Tinhloko ti tlakukile! Nseketelo wa switirhisiwa swa gap leswi nga na flexbox wu engeteriwile sweswinyana eka Safari, kutani anakanya hi ku tiyisisa nseketelo wa wena wa browser lowu u wu kunguhateke. Grid layout a yi fanelanga yi va na timhaka. Hlaya swo tala .

Ololoka

Tirhisa .vstackku endla swivumbeko leswi yimisiweke. Swilo leswi hlanganisiweke swi ni ku anama loku heleleke hi ku tiyimisela. Tirhisa .gap-*switirhisiwa ku engetela ndhawu exikarhi ka swilo.

Nchumu wo sungula

Nchumu wa vumbirhi

Nchumu wa vunharhu

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>

Ololoka

Tirhisa .hstackeka swivumbeko swa horizontal. Swilo leswi hlanganisiweke swi le xikarhi hi ndlela yo yima hi ku tiyimisela naswona swi teka ntsena ku anama ka swona loku lavekaka. Tirhisa .gap-*switirhisiwa ku engetela ndhawu exikarhi ka swilo.

Nchumu wo sungula

Nchumu wa vumbirhi

Nchumu wa vunharhu

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>

Ku tirhisa switirhisiwa swa margin ya horizontal ku fana na .ms-autoas spacers:

Nchumu wo sungula

Nchumu wa vumbirhi

Nchumu wa vunharhu

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>

Naswona hi milawu leyi yimisiweke : .

Nchumu wo sungula

Nchumu wa vumbirhi

Nchumu wa vunharhu

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>

Swikombiso

Tirhisa .vstackku hlanganisa swikomba-nkarhi ni swiaki swin’wana:

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>

Endla fomo ya le ndzeni ka layini hi .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;
}