Stacks

Alîkarên kurtenivîsê yên ku li ser karûbarên meya flexbox-ê ava dikin da ku sêwirana pêkhatê ji her demê zûtir û hêsantir bikin.

Li ser vê rûpelê

Stacks ji bo sepandina hejmarek taybetmendiyên flexbox-ê kurtebirek pêşkêş dikin da ku zû û bi hêsanî sêwiranan li Bootstrap biafirînin. Hemî kredî ji bo konsept û pêkanînê diçe projeya Pylon çavkaniya vekirî .

Serê xwe! Piştgiriya ji bo karûbarên gap bi flexbox di van demên dawî de li Safari hate zêdekirin, ji ber vê yekê binihêrin ku piştgiriya geroka xweya armanckirî verast bikin. Plansaziya torê divê pirsgirêk tune be. Zêdetir bixwînin .

Çikanî

Ji .vstackbo afirandina nexşeyên vertical bikar bînin. Tiştên lihevkirî ji hêla xwerû ve tev-fireh in. Karûbaran bikar bînin .gap-*ku di navbera tiştan de cîh zêde bikin.

Babetê yekem

Babetê duyemîn

Tişta sêyemîn

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

Asumane

Ji .hstackbo nexşeyên horizontal bikar bînin. Tiştên lihevkirî ji hêla xwerû ve li navendê vertîkal in û tenê firehiya xwe ya pêwîst digirin. Karûbaran bikar bînin .gap-*ku di navbera tiştan de cîh zêde bikin.

Babetê yekem

Babetê duyemîn

Tişta sêyemîn

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

Bikaranîna karûbarên marjînal ên horizontî yên wekî .ms-autowekî spacers:

Babetê yekem

Babetê duyemîn

Tişta sêyemîn

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

Û bi qaîdeyên vertical :

Babetê yekem

Babetê duyemîn

Tişta sêyemîn

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

Examples

Ji .vstackbo berhevkirina bişkok û hêmanên din bikar bînin:

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

Formek hundurîn bi .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;
}