Tumpukan

Pembantu pondok anu ngawangun di luhur utilitas flexbox kami pikeun ngajantenkeun perenah komponén langkung gancang sareng langkung gampang ti kantos.

Dina kaca ieu

Tumpukan nawiskeun potong kompas pikeun nerapkeun sajumlah sipat flexbox pikeun gancang sareng gampang nyiptakeun perenah dina Bootstrap. Sadaya kiridit kanggo konsép sareng palaksanaan nuju kana proyék Pylon open source .

Mastaka tegak! Rojongan pikeun gap utiliti kalawan flexbox nembe ditambahkeun kana Safari, jadi mertimbangkeun verifying rojongan browser dimaksudkeun Anjeun. Tata perenah grid teu kedah aya masalah. Baca deui .

Nangtung

Paké .vstackpikeun nyieun layouts nangtung. Item numpuk sacara standar lebar pinuh. Paké .gap-*utiliti pikeun nambahkeun spasi antara item.

Item kahiji

Item kadua

Item katilu

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>

Horizontal

Paké .hstackpikeun layouts horizontal. Item tumpuk sacara vertikal dipuseurkeun sacara standar sareng ngan ukur nyandak lebar anu diperyogikeun. Paké .gap-*utiliti pikeun nambahkeun spasi antara item.

Item kahiji

Item kadua

Item katilu

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>

Ngagunakeun utilitas margin horizontal sapertos .ms-autospacers:

Item kahiji

Item kadua

Item katilu

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>

Jeung aturan vertikal :

Item kahiji

Item kadua

Item katilu

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>

Contona

Paké .vstackpikeun tumpukan tombol jeung elemen séjén:

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>

Jieun formulir inline kalayan .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;
}