Tuullaawwan

Gargaartoota harka gabaabaa kanneen faayidaa flexbox keenya gubbaatti ijaaraman haala qaamolee yeroo kamiyyuu caalaa saffisaa fi salphaa taasisu.

Fuula kana irratti

Tuutaawwan saffisaa fi salphaatti Bootstrap keessatti qindaa'inoota uumuuf amaloota flexbox lakkoofsa hojii irra oolchuuf karaa gabaabaa dhiyeessu. Yaad-rimee fi hojiirra oolmaa kanaaf galatni hundi gara pirojektii madda banaa Paayilooniitti deema .

Mataa ol qaba! Deeggarsi faayidaa qaawwa flexbox qaban dhiheenya kana Safari irratti dabalameera, kanaaf deeggarsa biraawzari yaadde mirkaneessuu yaadaa. Haalli giiridii dhimma tokkollee qabaachuu hin qabu. Dabalata dubbisaa .

Ol kan dhaabbatu

.vstackHaalata dhaabbataa uumuuf fayyadami . Wantoonni tuulaman durtii bal'ina guutuu qabu. .gap-*Wantoota gidduutti iddoo dabaluudhaaf faayidaa fayyadami .

Qabxii jalqabaa

Qabxii lammaffaa

Qabxii sadaffaa

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>

Dalga-galii

.hstackHaalata qajeelaadhaaf fayyadami . Wantoonni tuulaman durtiidhaan giddugaleessa dhaabbataa fi bal'ina isaanii barbaachisaa qofa fudhatu. .gap-*Wantoota gidduutti iddoo dabaluudhaaf faayidaa fayyadami .

Qabxii jalqabaa

Qabxii lammaffaa

Qabxii sadaffaa

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>

Faayidaa margina horizontal akka .ms-autoakka spacers fayyadamuu:

Qabxii jalqabaa

Qabxii lammaffaa

Qabxii sadaffaa

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>

Akkasumas seera dhaabbataa wajjin : .

Qabxii jalqabaa

Qabxii lammaffaa

Qabxii sadaffaa

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>

Fakkeenyaaf

.vstackQabduu fi qaamolee biroo tuuluuf fayyadami :

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>

Unka sarara keessaa .hstack: 1000 waliin uumi.

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 jedhama

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