Nneɛma a wɔaboaboa ano
Shorthand aboafo a wɔkyekye wɔ yɛn flexbox utilities no atifi ma ɛma component layout yɛ ntɛmntɛm na ɛyɛ mmerɛw sen bere biara.
Stacks ma kwan tiawa a wode bedi dwuma de flexbox agyapade dodow bi adi dwuma de ayɛ nhyehyɛe ntɛmntɛm na ɛnyɛ den wɔ Bootstrap mu. Adwene ne dwumadie no ho anuonyam nyinaa kɔ open source Pylon adwuma no so .
Tenten mu
Fa .vstack
yɛ nhyehyɛe ahorow a ɛda hɔ gyina hɔ. Nneɛma a wɔaboaboa ano no yɛ nea ɛtrɛw nyinaa default so. Fa .gap-*
utilities di dwuma de fa baabi ka nneɛma ntam.
<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>
Ne tɛtrɛtɛ mu
Fa di dwuma .hstack
ma nhyehyɛe ahorow a ɛkɔ soro. Nneɛma a wɔaboaboa ano no wɔ mfinimfini gyina hɔ default so na ɛfa wɔn trɛw a ɛho hia nkutoo. Fa .gap-*
utilities di dwuma de fa baabi ka nneɛma ntam.
<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>
Sɛ wode horizontal margin utilities te .ms-auto
sɛ sɛ spacers di dwuma a:
<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>
Na ɛne mmara a ɛda hɔ gyina hɔ : .
<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>
Nhwɛso ahorow
Fa di dwuma .vstack
de stack buttons ne nneɛma afoforo:
<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>
Yɛ inline fom a wode .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;
}