Stacks (Stacks) ye

Dɛmɛnan minnu bɛ sɛbɛnnibolo surunw jɔ an ka flexbox nafalanw sanfɛ walasa ka component layout kɛ teliya la ani ka nɔgɔya ka tɛmɛn fɔlɔ kan.

Nin ɲɛ in kan

Stacks bɛ sira surun dɔ Di walasa ka flexbox nafa damadɔ Kɛ walasa ka layidu talenw Dabɔ teliya la ani nɔgɔya la Bootstrap kɔnɔ. hakilina ni waleyali bonya bɛɛ bɛ taa da wulilen porozɛ Pylon na .

Kungolow bɛ wuli! Dɛmɛ min bɛ gap utilities ni flexbox kan, o farala Safari kan kɔsa in na, o la, i k’a lajɛ k’i ka navigatɔrɔ dɛmɛni laɲininen sɛgɛsɛgɛ. Grid layout man kan ka kɛ ni koɲɛw ye. Aw ye kunnafoni wɛrɛw kalan .

Jɔ̀len

Baara kɛ ni .vstacka ye walasa ka layidu jɔlenw dilan. Fɛn minnu bɛ ɲɔgɔn kan, olu ye u bonya dafalen ye ka kɛɲɛ ni u yɛrɛ ye. Baara kɛ ni .gap-*nafamafɛnw ye walasa ka yɔrɔ dɔ fara fɛnw ni ɲɔgɔn cɛ.

Fɛn fɔlɔ min bɛ yen

Fɛn filanan

Fɛn sabanan

html ye

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

Dalen

Baara kɛ ni .hstacka ye walasa ka layidu tilennenw kɛ. Fɛn minnu bɛ ɲɔgɔn kan, olu bɛ jɔ cɛmancɛ la ka kɛɲɛ ni u yɛrɛ ye, wa u bɛ u bonya wajibiyalen dɔrɔn de ta. Baara kɛ ni .gap-*nafamafɛnw ye walasa ka yɔrɔ dɔ fara fɛnw ni ɲɔgɔn cɛ.

Fɛn fɔlɔ min bɛ yen

Fɛn filanan

Fɛn sabanan

html ye

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

Baara kɛ ni horizontal margin utilities ye i n’a fɔ .ms-autoas spacers:

Fɛn fɔlɔ min bɛ yen

Fɛn filanan

Fɛn sabanan

html ye

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

Ani ni sariyaw jɔlenw ye :

Fɛn fɔlɔ min bɛ yen

Fɛn filanan

Fɛn sabanan

html ye

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

Misaliw

Baara kɛ ni .vstacka ye walasa ka butɔni ni fɛn wɛrɛw lajɛ ɲɔgɔn kan:

html ye

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

Aw bɛ inline foroko dɔ dabɔ ni .hstack:

html ye

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

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