Hoʻopaʻa

ʻO nā mea kōkua pōkole e kūkulu ana ma luna o kā mākou mau mea hoʻohana flexbox e hana wikiwiki a maʻalahi hoʻi ka hoʻonohonoho ʻana.

Ma kēia ʻaoʻao

Hāʻawi ʻo Stacks i kahi pōkole no ka hoʻohana ʻana i kekahi mau waiwai flexbox e hana wikiwiki a maʻalahi i nā hoʻolālā ma Bootstrap. Loaʻa nā hōʻaiʻē a pau no ka manaʻo a me ka hoʻokō ʻana i ka open source Pylon project .

Nā poʻo i luna! Ua hoʻohui hou ʻia ke kākoʻo no nā pono āpau me ka flexbox iā Safari, no laila e noʻonoʻo e hōʻoia i kāu kākoʻo polokalamu kele. ʻAʻohe pilikia o ka hoʻolālā grid. Heluhelu hou aku .

Kū pololei

E hoʻohana .vstacki ka hana ʻana i nā hoʻolālā kū i luna. ʻO nā mea i hoʻopaʻa ʻia he laulā piha ma ka paʻamau. E hoʻohana .gap-*i nā pono hana e hoʻohui i ka hakahaka ma waena o nā mea.

Mea mua

ʻImi ʻelua

'ikamu kolu

html

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

Kaupae

E hoʻohana .hstackno nā hoʻolālā hoʻolālā. Hoʻopili ʻia nā mea i hoʻopaʻa ʻia ma ke kikowaena paʻamau a lawe wale i ko lākou ākea kūpono. E hoʻohana .gap-*i nā pono hana e hoʻohui i ka hakahaka ma waena o nā mea.

Mea mua

ʻImi ʻelua

'ikamu kolu

html

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

Ke hoʻohana nei i nā pono hana palena ākea e like .ms-autome nā spacers:

Mea mua

ʻImi ʻelua

'ikamu kolu

html

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

A me nā lula kūpaʻa :

Mea mua

ʻImi ʻelua

'ikamu kolu

html

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

Nā laʻana

E hoʻohana .vstacki nā pihi a me nā mea ʻē aʻe:

html

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

E hana i kahi palapala inline me .hstack:

html

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