Tuullaawwan
Gargaartoota harka gabaabaa kanneen faayidaa flexbox keenya gubbaatti ijaaraman haala qaamolee yeroo kamiyyuu caalaa saffisaa fi salphaa taasisu.
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 .
Ol kan dhaabbatu
.vstack
Haalata dhaabbataa uumuuf fayyadami . Wantoonni tuulaman durtii bal'ina guutuu qabu. .gap-*
Wantoota gidduutti iddoo dabaluudhaaf faayidaa fayyadami .
<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
.hstack
Haalata qajeelaadhaaf fayyadami . Wantoonni tuulaman durtiidhaan giddugaleessa dhaabbataa fi bal'ina isaanii barbaachisaa qofa fudhatu. .gap-*
Wantoota gidduutti iddoo dabaluudhaaf faayidaa fayyadami .
<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-auto
akka spacers fayyadamuu:
<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 : .
<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
.vstack
Qabduu fi qaamolee biroo tuuluuf fayyadami :
<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.
<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;
}