Milu

Othandizira a Shorthand omwe amamanga pamwamba pazida zathu za flexbox kuti apange masanjidwe azinthu mwachangu komanso mosavuta kuposa kale.

Patsamba ili

Stacks imapereka njira yachidule yogwiritsira ntchito zingapo za flexbox kuti mupange mwachangu komanso mosavuta masanjidwe mu Bootstrap. Ngongole zonse za lingaliro ndi kukhazikitsa zimapita ku polojekiti yotseguka ya Pylon .

Mungodziwiratu! Thandizo pazida zokhala ndi flexbox zidawonjezedwa posachedwa ku Safari, kotero lingalirani zotsimikizira kuti mukufuna thandizo la msakatuli wanu. Maonekedwe a gridi asakhale ndi vuto. Werengani zambiri .

Oima

Gwiritsani .vstackntchito kupanga masanjidwe ofukula. Zinthu zosanjikizidwa zimakhala ndi m'lifupi mwachisawawa. Gwiritsani .gap-*ntchito zowonjezera kuti muwonjezere malo pakati pa zinthu.

Chinthu choyamba

Chinthu chachiwiri

Chinthu chachitatu

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

Chopingasa

Gwiritsani .hstackntchito masanjidwe opingasa. Zinthu zosanjikizidwa zimakhazikika molunjika ndipo zimangotenga m'lifupi mwake. Gwiritsani .gap-*ntchito zowonjezera kuti muwonjezere malo pakati pa zinthu.

Chinthu choyamba

Chinthu chachiwiri

Chinthu chachitatu

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

Kugwiritsa ntchito zopingasa zopingasa ngati .ms-automa spacers:

Chinthu choyamba

Chinthu chachiwiri

Chinthu chachitatu

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

Ndipo ndi malamulo ofukula :

Chinthu choyamba

Chinthu chachiwiri

Chinthu chachitatu

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

Zitsanzo

Gwiritsani .vstackntchito kuyika mabatani ndi zinthu zina:

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

Pangani fomu yapaintaneti ndi .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;
}