Munzelli

Shorthand helpers li jibnu fuq l-utilitajiet tal-flexbox tagħna biex jagħmlu t-tqassim tal-komponenti aktar mgħaġġel u eħfef minn qatt qabel.

Fuq din il-paġna

Munzelli joffru shortcut għall-applikazzjoni ta 'numru ta' proprjetajiet ta 'flexbox biex jinħolqu taqsim malajr u faċilment f'Bootstrap. Il-kreditu kollu għall-kunċett u l-implimentazzjoni jmur għall- proġett open source Pylon .

Irjus up! L-appoġġ għall-utilitajiet gap bil-flexbox ġie miżjud reċentement ma' Safari, għalhekk ikkunsidra li tivverifika l-appoġġ maħsub għall-browser tiegħek. It-tqassim tal-grilja m'għandux ikollu problemi. Aqra aktar .

Vertikali

Uża .vstackbiex toħloq layouts vertikali. L-oġġetti f'munzelli huma wisa 'sħiħ b'mod awtomatiku. Uża .gap-*utilitajiet biex iżżid spazju bejn l-oġġetti.

L-ewwel oġġett

It-tieni punt

It-tielet punt

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

Orizzontali

Uża .hstackgħal taqsim orizzontali. L-oġġetti f'munzelli huma ċċentrati vertikalment awtomatikament u jieħdu biss il-wisa' meħtieġ tagħhom. Uża .gap-*utilitajiet biex iżżid spazju bejn l-oġġetti.

L-ewwel oġġett

It-tieni punt

It-tielet punt

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

L-użu ta' utilitajiet ta' marġini orizzontali bħal .ms-autobħala spacers:

L-ewwel oġġett

It-tieni punt

It-tielet punt

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

U b'regoli vertikali :

L-ewwel oġġett

It-tieni punt

It-tielet punt

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

Eżempji

Uża .vstackbiex tistiva buttuni u elementi oħra:

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

Oħloq formola inline ma' .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;
}