Mekgobo
Bathuši ba shorthand bao ba agago godimo ga didirišwa tša rena tša flexbox go dira gore peakanyo ya dikarolo e be ka lebelo le bonolo go feta le ge e le neng pele.
Mekgobo e fana ka tsela e kopana ya go diriša palo ya dithoto tša flexbox go hlama dipeakanyo ka pela le gabonolo ka go Bootstrap. Mokitlana ka moka wa kgopolo le phethagatšo o ya go projeke ya Pylon ya mohlodi wo o bulegilego .
Tsepamego
Šomiša .vstack
go hlama dipeakanyo tša go ema thwii. Dilo tše di kgobokeditšwego ke bophara bjo bo tletšego ka go ikemela. Šomiša .gap-*
didirišwa go oketša sekgoba magareng ga dilo.
<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>
Rapamego
Diriša .hstack
bakeng sa dipeakanyo tše di rapaletšego. Dilo tše di kgobokeditšwego di tsepame thwii ka go ikemela gomme di tšea fela bophara bja tšona bjo bo nyakegago. Šomiša .gap-*
didirišwa go oketša sekgoba magareng ga dilo.
<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>
Go šomiša didirišwa tša mošito wa go rapalala go swana .ms-auto
le bjalo ka diphapano:
<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>
Le ka melao e emeng : .
<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>
Mehlala
Šomiša .vstack
go kgoboketša dikonope le dielemente tše dingwe:
<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>
Hlama foromo ya ka gare ga mothaladi ka .hstack
: .
<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;
}