Ibirindiro
Abafasha ba Shorthand bubaka hejuru ya flexbox yingirakamaro kugirango ibice bigize ibice byihuse kandi byoroshye kuruta mbere.
Ibice bitanga shortcut yo gukoresha umubare wimiterere ya flexbox kugirango byihuse kandi byoroshye gukora imiterere muri Bootstrap. Inguzanyo zose kubitekerezo no kubishyira mubikorwa bijya kumugaragaro umushinga wa Pylon .
Uhagaritse
Koresha .vstack
kugirango uhagarike imiterere. Ibintu byegeranye ni ubugari-bwuzuye kubusanzwe. Koresha .gap-*
ibikoresho kugirango wongere umwanya hagati yibintu.
<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>
Uhagaritse
Koresha .hstack
imiterere itambitse. Ibintu byashyizwe hamwe bihagaritse hagati yubusa kandi bifata gusa ubugari bukenewe. Koresha .gap-*
ibikoresho kugirango wongere umwanya hagati yibintu.
<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>
Gukoresha margin margin yingirakamaro nka .ms-auto
spacers:
<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>
Kandi hamwe namategeko ahagaritse :
<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>
Ingero
Koresha .vstack
gutondekanya buto nibindi bintu:
<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>
Kora ifishi y'umurongo hamwe na .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;
}