Stacks

Mpanampy amin'ny teny fohy izay manangana eo an-tampon'ireo kojakoja flexbox ataontsika mba hahatonga ny fandrafetana singa haingana sy mora kokoa noho ny hatramin'izay.

Amin'ity pejy ity

Ny stacks dia manolotra hitsin-dàlana hampiharana fananana flexbox maromaro mba hamoronana lamina haingana sy mora ao amin'ny Bootstrap. Ny crédit rehetra momba ny foto-kevitra sy ny fampiharana dia mandeha amin'ny tetikasa Pylon open source .

Fampitandremana! Nampidirina tamin'ny Safari vao haingana ny fanohanan'ny gap utility miaraka amin'ny flexbox, koa eritrereto ny manamarina ny fanohanan'ny navigateur tianao. Tsy tokony hisy olana ny fametrahana ny grid. Vakio bebe kokoa .

mijidina

Ampiasao .vstackmba hamoronana drafitra mitsangana. Ny sakan'ny zavatra voatavo dia feno sakan'ny default. Mampiasà .gap-*fitaovana hanampiana toerana eo anelanelan'ny entana.

Singa voalohany

Zavatra faharoa

Zavatra fahatelo

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>

Marindrano

Ampiasaina .hstackamin'ny famolavolana horizontaly. Ny singa voatavo dia mitsangana eo afovoany ary tsy mandray afa-tsy ny sakany ilaina. Mampiasà .gap-*fitaovana hanampiana toerana eo anelanelan'ny entana.

Singa voalohany

Zavatra faharoa

Zavatra fahatelo

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>

Mampiasa fitaovana marindrano marindrano toy .ms-autony spacer:

Singa voalohany

Zavatra faharoa

Zavatra fahatelo

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>

Ary miaraka amin'ny fitsipika mitsangana :

Singa voalohany

Zavatra faharoa

Zavatra fahatelo

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>

OHATRA

Ampiasao .vstackmba hametahana bokotra sy singa hafa:

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>

Mamorona endrika inline miaraka amin'ny .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;
}