Iimfumba

Abancedisi abamfutshane bakhe phezu kwezinto zethu ze-flexbox ukwenza uyilo lwecandelo ngokukhawuleza nalula kunangaphambili.

Kweli phepha

Izitaki zibonelela ngesinqumli sokusebenzisa inani leempawu ze-flexbox ukwenza ngokukhawuleza nangokulula uyilo kwi-Bootstrap. Yonke ikhredithi yengcamango kunye nokuphunyezwa iya kwiprojekthi yePylon yomthombo ovulekileyo .

Iintloko phezulu! Inkxaso ye-gap utility kunye ne-flexbox isanda kongezwa kwiSafari, ngoko cinga ngokuqinisekisa inkxaso yakho yesikhangeli. Uyilo lwegridi kufuneka kungabikho miba. Funda ngakumbi .

Ngokuthe nkqo

Sebenzisa .vstackukuyila uyilo oluthe nkqo. Izinto ezipakishweyo zinobubanzi obupheleleyo ngokungagqibekanga. Sebenzisa .gap-*izinto eziluncedo ukongeza isithuba phakathi kwezinto.

Into yokuqala

Into yesibini

Into yesithathu

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>

Ukuthe tye

Ukusetyenziswa .hstackkoyilo oluthe tye. Izinto ezipakishwe ngokuthe nkqo zibekwe embindini ngokungagqibekanga kwaye zithatha kuphela ububanzi bazo obuyimfuneko. Sebenzisa .gap-*izinto eziluncedo ukongeza isithuba phakathi kwezinto.

Into yokuqala

Into yesibini

Into yesithathu

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>

Ukusebenzisa izinto ezisetyenzisiweyo zomda othe tye njengezikhewu .ms-auto:

Into yokuqala

Into yesibini

Into yesithathu

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>

Kwaye kunye nemithetho ethe nkqo :

Into yokuqala

Into yesibini

Into yesithathu

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>

Imizekelo

Sebenzisa .vstackukupakisha amaqhosha kunye nezinye izinto:

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>

Yenza ifom engaphakathi nge .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;
}