Stacks

Shorthand vabatsiri vanovaka pamusoro pezvishandiso zvedu zveflexbox kugadzira chikamu chechikamu nekukurumidza uye nyore kupfuura nakare kose.

Pa peji ino

Stacks inopa nzira yekudimbudzira yekushandisa akati wandei eflexbox zvivakwa kukurumidza uye nyore kugadzira marongero muBootstrap. Yese kiredhiti yeiyo pfungwa uye kuita inoenda kune yakavhurika sosi Pylon chirongwa .

Musoro! Tsigiro yezvishandiso zvegap ine flexbox ichangobva kuwedzerwa kuSafari, saka funga kuonesa tsigiro yako yebhurawuza. Grid dhizaini haifanire kuve nenyaya. Read more .

Vertical

Shandisa .vstackkugadzira marongerwo akatwasuka. Zvinhu zvakaturikidzana zvakazara-faradhi nekukasira. Shandisa .gap-*zvishandiso kuwedzera nzvimbo pakati pezvinhu.

Chinhu chekutanga

Chinhu chechipiri

Chechitatu chinhu

<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

Shandisa .hstackkune yakachinjika marongero. Zvinhu zvakaturikidzana zvakamira pakati nepakati uye zvinongotora hupamhi hwazvo hunodiwa. Shandisa .gap-*zvishandiso kuwedzera nzvimbo pakati pezvinhu.

Chinhu chekutanga

Chinhu chechipiri

Chechitatu chinhu

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

Kushandisa horizontal margin utilities .ms-autosenge spacers:

Chinhu chekutanga

Chinhu chechipiri

Chechitatu chinhu

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

Uye nemitemo yakatwasuka :

Chinhu chekutanga

Chinhu chechipiri

Chechitatu chinhu

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

Mienzaniso

Shandisa .vstackkuisa mabhatani uye zvimwe zvinhu:

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

Gadzira fomu remukati ne .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;
}