Tumpukan

Helpers shorthand sing dibangun ing ndhuwur utilitas flexbox kita kanggo nggawe tata letak komponen luwih cepet lan luwih gampang saka tau.

Ing kaca iki

Tumpukan nawakake trabasan kanggo ngetrapake sawetara properti flexbox kanggo nggawe tata letak kanthi cepet lan gampang ing Bootstrap. Kabeh kredit kanggo konsep lan implementasine menyang proyek Pylon open source .

Kepala munggah! Dhukungan kanggo utilitas gap karo flexbox bubar ditambahake menyang Safari, mula coba verifikasi dhukungan browser sing dituju. Tata letak kothak kudu ora ana masalah. Waca liyane .

Vertikal

Gunakake .vstackkanggo nggawe tata letak vertikal. Item sing ditumpuk minangka standar. Gunakake .gap-*utilitas kanggo nambah spasi ing antarane item.

Item pisanan

Item kapindho

item katelu

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>

Horisontal

Gunakake .hstackkanggo tata letak horisontal. Item sing ditumpuk vertikal dipusatake kanthi standar lan mung njupuk jembar sing dibutuhake. Gunakake .gap-*utilitas kanggo nambah spasi ing antarane item.

Item pisanan

Item kapindho

item katelu

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>

Nggunakake utilitas margin horisontal kaya .ms-autospacer:

Item pisanan

Item kapindho

item katelu

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>

Lan karo aturan vertikal :

Item pisanan

Item kapindho

item katelu

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>

Tuladha

Gunakake .vstackkanggo tumpukan tombol lan unsur liyane:

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>

Gawe formulir inline kanthi .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;
}