Pile

Èd kout ki bati sou sèvis piblik flexbox nou yo pou fè konpozisyon eleman pi rapid ak pi fasil pase tout tan.

Nan paj sa a

Stacks ofri yon chemen kout pou aplike yon kantite pwopriyete flexbox pou kreye kouman yo byen vit ak fasil nan Bootstrap. Tout kredi pou konsèp ak aplikasyon an ale nan pwojè Pylon sous louvri .

Tèt leve! Sipò pou sèvis piblik gap ak flexbox dènyèman te ajoute nan Safari, kidonk konsidere verifye sipò navigatè ou gen entansyon. Layout kadriyaj pa ta dwe gen okenn pwoblèm. Li plis .

Vètikal

Sèvi ak .vstackyo kreye layout vètikal. Atik anpile yo plen lajè pa default. Sèvi ak .gap-*sèvis piblik pou ajoute espas ant atik yo.

Premye atik

Dezyèm atik

Twazyèm atik

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>

Orizontal

Itilize .hstackpou layout orizontal. Atik anpile yo vètikal santre pa default epi sèlman pran lajè nesesè yo. Sèvi ak .gap-*sèvis piblik pou ajoute espas ant atik yo.

Premye atik

Dezyèm atik

Twazyèm atik

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>

Sèvi ak sèvis piblik maj orizontal tankou .ms-autokòm espas:

Premye atik

Dezyèm atik

Twazyèm atik

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>

Ak règ vètikal :

Premye atik

Dezyèm atik

Twazyèm atik

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>

Egzanp yo

Sèvi .vstackak pile bouton ak lòt eleman:

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>

Kreye yon fòm inline ak .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;
}