Ackserler

Komponentleriň ýerleşişini öňküsinden has çalt we aňsatlaşdyrmak üçin flexbox kömekçi enjamlarymyzyň üstünde gurlan şortand kömekçileri.

Bu sahypada

Stack, Bootstrap-da düzülişleri çalt we aňsat döretmek üçin birnäçe flexbox häsiýetini ulanmak üçin gysga ýol hödürleýär. Düşünje we durmuşa geçirmek üçin ähli karzlar açyk çeşme Pylon taslamasyna degişlidir.

Başlar! Flexbox bilen boşluk hyzmatlaryna goldaw ýakynda Safari-e goşuldy, şonuň üçin niýetlenen brauzer goldawyňyzy barlamagy göz öňünde tutuň. Grid düzülişinde hiç hili mesele bolmaly däldir. Dowamyny oka .

Dik

.vstackWertikal düzülişleri döretmek üçin ulanyň . Toplanan zatlar, adaty ýagdaýda doly ini. .gap-*Harytlaryň arasynda boşluk goşmak üçin kömekçi enjamlary ulanyň .

Birinji element

Ikinji element

Üçünji element

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

Gorizontal

.hstackGorizontal ýerleşişler üçin ulanyň . Toplanan zatlar dikligine merkezleşdirilen we diňe zerur giňligini alýar. .gap-*Harytlaryň arasynda boşluk goşmak üçin kömekçi enjamlary ulanyň .

Birinji element

Ikinji element

Üçünji element

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

Boşluk ýaly gorizontal margin enjamlaryny ulanmak .ms-auto:

Birinji element

Ikinji element

Üçünji element

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

Wertikal düzgünler bilen :

Birinji element

Ikinji element

Üçünji element

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

Mysallar

.vstackDüwmeleri we beýleki elementleri ýygnamak üçin ulanyň :

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

Aşakdaky görnüşi dörediň .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;
}