Duubista

Caawiye-gacan-gaaban oo ka dul dhisma agabkayaga flexbox si ay u habeeyaan qaybaha ka dhaqso badan ugana fudud weligii.

Boggan

Xirmooyinka waxay bixiyaan hab-gaab lagu dabaqo tiro ka mid ah guryaha flexbox si ay si deg deg ah oo fudud ugu abuuraan naqshado gudaha Bootstrap. Dhammaan ammaanta fikradda iyo hirgelinta waxay ku socotaa isha furan ee mashruuca Pylon .

Madaxa kor u qaad! Taageerada utility gap ee leh flexbox ayaa dhawaan lagu daray Safari, markaa ka fiirso xaqiijinta taageerada browserka aad damacsan tahay. Nashqadaynta xayndaabku waa in aanay wax dhibaato ah yeelan. Akhri wax dheeraad ah .

Toosan

Isticmaal .vstacksi aad u abuurto jaantusyo toosan. Walxaha is dulsaaran waa balac buuxa ahaan. Isticmaal .gap-*utility si aad ugu darto meel bannaan oo u dhaxaysa alaabta.

Shayga koowaad

Shayga labaad

Shayga saddexaad

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>

Horizontal

U isticmaal .hstackqaab-dhismeedka jiifka. Alaabooyinka is dulsaaran ayaa si toos ah udagsan oo kaliya waxay qaadanayaan ballacooda lagama maarmaanka ah. Isticmaal .gap-*utility si aad ugu darto meel bannaan oo u dhaxaysa alaabta.

Shayga koowaad

Shayga labaad

Shayga saddexaad

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>

Isticmaalka utility margin siman sida .ms-autospacers:

Shayga koowaad

Shayga labaad

Shayga saddexaad

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>

Oo leh xeerar toosan :

Shayga koowaad

Shayga labaad

Shayga saddexaad

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>

Tusaalooyinka

Isticmaal .vstacksi aad u xidhid badhamada iyo walxaha kale:

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>

Ku samee foom khadka tooska ah .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;
}