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.

Wɔ kratafa yi so

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 .

Ti a ɛwɔ soro! Wɔde mmoa a wɔde ma gap utilities a ɛwɔ flexbox no kaa Safari ho nnansa yi ara, enti susuw ho sɛ wobɛhwɛ sɛ wo browser mmoa a wopɛ sɛ wobɔ no yɛ nokware anaa. Ɛnsɛ sɛ grid nhyehyɛe no nya nsɛm biara. Kenkan pii .

Tenten mu

Fa .vstackyɛ 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.

Ade a edi kan

Ade a ɛto so abien

Ade a ɛto so abiɛsa

<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 .hstackma 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.

Ade a edi kan

Ade a ɛto so abien

Ade a ɛto so abiɛsa

<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-autosɛ sɛ spacers di dwuma a:

Ade a edi kan

Ade a ɛto so abien

Ade a ɛto so abiɛsa

<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ɔ : .

Ade a edi kan

Ade a ɛto so abien

Ade a ɛto so abiɛsa

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