Zloženke

Pomočniki za stenografijo, ki nadgrajujejo naše pripomočke flexbox, da naredijo postavitev komponent hitrejšo in lažjo kot kdaj koli prej.

Na tej strani

Skladi ponujajo bližnjico za uporabo številnih lastnosti flexbox za hitro in preprosto ustvarjanje postavitev v Bootstrapu. Vse zasluge za koncept in izvedbo gredo odprtokodnemu projektu Pylon .

Glavo pokonci! Podpora za pripomočke za vrzeli s flexboxom je bila pred kratkim dodana v Safari, zato razmislite o preverjanju predvidene podpore za brskalnik. Postavitev mreže ne bi smela imeti težav. Preberi več .

Navpično

Uporabite .vstackza ustvarjanje navpičnih postavitev. Zloženi elementi so privzeto polne širine. Uporabite .gap-*pripomočke za dodajanje prostora med elementi.

Prvi predmet

Drugi predmet

Tretji predmet

html

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

Vodoravno

Uporabite .hstackza horizontalne postavitve. Zloženi elementi so privzeto navpično centrirani in zavzemajo samo potrebno širino. Uporabite .gap-*pripomočke za dodajanje prostora med elementi.

Prvi predmet

Drugi predmet

Tretji predmet

html

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

Uporaba pripomočkov za vodoravne robove, kot .ms-autoso distančniki:

Prvi predmet

Drugi predmet

Tretji predmet

html

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

In z navpičnimi pravili :

Prvi predmet

Drugi predmet

Tretji predmet

html

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

Primeri

Uporabite .vstackza zlaganje gumbov in drugih elementov:

html

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

Ustvarite vgrajeni obrazec z .hstack:

html

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