Stak dɛn

Shorthand ɛlda dɛn we de bil pan wi fleksbɔks yutiliti fɔ mek kɔmpɔnɛnt layout fast ɛn izi pas ɛni ɔda tɛm.

Na dis pej

Stak dɛn de gi wan shɔtkat fɔ aplay wan nɔmba fɔ fleksbɔks prɔpati dɛn fɔ mek layout dɛn kwik ɛn izi wan na Bootstrap. Ɔl di kredit fɔ di kɔnsɛpt ɛn implimɛnt de go to di opin sɔs Paylɔn projɛkt .

Hed dɛn de ɔp! Sɔpɔt fɔ gap yutiliti dɛn wit flexbox bin jɔs ad to Safari, so tink bɔt fɔ chɛk yu brawza sɔpɔt we yu bin want fɔ gɛt. Grid layout nɔ fɔ gɛt ɛni prɔblɛm. Rid mɔ bɔt dis .

Ɔp ɛn dɔŋ

Yuz .vstackfɔ mek vertikal layout dɛn. Di tin dɛn we dɛn dɔn stak na ful-wid bay difɔlt. Yuz .gap-*yutiliti fɔ ad ples bitwin di tin dɛn.

Fɔs tin we dɛn de tɔk bɔt

Sɛkɔn tin

Tɔd tin we de na di tɔd

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

Bifo ɛn biɛn

Yuz .hstackfɔ ɔrizɔntal layout dɛn. Di tin dɛn we dɛn dɔn stak de vertikal sɛnt bay difɔlt ɛn dɛn jɔs de tek dɛn wit we dɛn nid. Yuz .gap-*yutiliti fɔ ad ples bitwin di tin dɛn.

Fɔs tin we dɛn de tɔk bɔt

Sɛkɔn tin

Tɔd tin we de na di tɔd

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

Yuz ɔrizɔntal margin yutiliti dɛn lɛk .ms-autoas spɛshal:

Fɔs tin we dɛn de tɔk bɔt

Sɛkɔn tin

Tɔd tin we de na di tɔd

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

Ɛn wit vertikal lɔ dɛn :

Fɔs tin we dɛn de tɔk bɔt

Sɛkɔn tin

Tɔd tin we de na di tɔd

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

Ɛgzampul dɛn

Yuz .vstackfɔ stak bɔtin dɛn ɛn ɔda tin dɛn:

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

Krio wan inlayn fɔm wit .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 we bin de

.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;
}