Awọn akopọ

Awọn oluranlọwọ kukuru ti o kọ lori oke awọn ohun elo flexbox wa lati jẹ ki ipilẹ paati ni iyara ati irọrun ju lailai.

Lori iwe yi

Awọn akopọ nfunni ni ọna abuja fun lilo nọmba awọn ohun-ini flexbox lati yara ati irọrun ṣẹda awọn ipilẹ ni Bootstrap. Gbogbo kirẹditi fun imọran ati imuse lọ si iṣẹ-ṣiṣe orisun ṣiṣi Pylon .

Efeti sile! Atilẹyin fun awọn ohun elo aafo pẹlu flexbox ni a ṣafikun laipẹ si Safari, nitorinaa gbero lati jẹrisi atilẹyin aṣawakiri ti o pinnu. Ifilelẹ akoj ko yẹ ki o ni awọn ọran kankan. Ka siwaju .

Inaro

Lo .vstacklati ṣẹda awọn ipilẹ inaro. Awọn nkan tolera jẹ iwọn ni kikun nipasẹ aiyipada. Lo .gap-*awọn ohun elo lati ṣafikun aaye laarin awọn ohun kan.

Ohun akọkọ

Nkan keji

Nkan kẹta

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>

Petele

Lo .hstackfun awọn ipilẹ petele. Awọn nkan tolera wa ni inaro nipasẹ aiyipada ati pe wọn gba iwọn pataki wọn nikan. Lo .gap-*awọn ohun elo lati ṣafikun aaye laarin awọn ohun kan.

Ohun akọkọ

Nkan keji

Nkan kẹta

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>

Lilo awọn ohun elo ala petele bii .ms-autoawọn alafo:

Ohun akọkọ

Nkan keji

Nkan kẹta

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>

Ati pẹlu awọn ofin inaro :

Ohun akọkọ

Nkan keji

Nkan kẹta

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>

Awọn apẹẹrẹ

Lo .vstacklati akopọ awọn bọtini ati awọn eroja miiran:

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>

Ṣẹda fọọmu inline pẹlu .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;
}