Stacks te a awm

Kan flexbox utilities chungah hian component layout chu a hma aia rang leh awlsam zawka siam turin shorthand helper te.

He page ah hian

Stacks hian Bootstrap-a layout awlsam leh rang taka siam theihna turin flexbox property engemaw zat apply theihna tur shortcut a pe a. Concept leh implementation atana credit zawng zawng chu open source Pylon project ah a kal vek a ni .

Lu a ti sang a! Tun hnaiah Safari-ah hian flexbox hmanga gap utilities support dah belh a ni a, chuvangin i browser support i tum chu verify dan ngaihtuah rawh. Grid layout hian issue a nei tur a ni lo. Chhiar belh rawh .

Ding ngil

.vstackVertical layout siam nan hmang rawh . Stacked item te chu default in full-width a ni. .gap-*Item hrang hrang inkara space dah belh nan utilities hmang ang che .

Item hmasa ber

Item pahnihna

Item pathumna

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

Khamphei

.hstackHorizontal layout atan hman tur a ni. Stacked items te hi default in vertically centered an ni a, an mamawh zau zawng chauh an la thin. .gap-*Item hrang hrang inkara space dah belh nan utilities hmang ang che .

Item hmasa ber

Item pahnihna

Item pathumna

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

Horizontal margin utility hmanga .ms-autospacer angin:

Item hmasa ber

Item pahnihna

Item pathumna

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

Tin, vertical rules nen chuan :

Item hmasa ber

Item pahnihna

Item pathumna

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

Entirna te

.vstackButton leh element dangte stack nan hmang ang che :

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

Inline form siam la, hetiang hian siam rawh .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 a ni

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