Stacks

Notae adiutrices quae super nostrae flexbox utilitates aedificant ut component extensionem citius ac facilius quam umquam efficiant.

In hac pagina

Stacks offert brevem ad applicandas plures proprietates flexboxs ut cito et facile in Bootstrap layouts creet. All credit for the concept and implementation goes to open source Pylon project .

Capita! Sustentatio hiatus utilitates cum flexbox Safari nuper additae est, ita considera examinans auxilium navigatri tui intentum. Ut at arcu eget nulla consequat auctor. Read more .

Vertical

Utere .vstackverticali creare layout. Reclinant items sunt plena latitudo per defaltam. Utere .gap-*utilitates addere spatio inter items.

Primo item

Secundus item

Tertio item

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>

Horizontal

Utere .hstackad layout horizontalem. Res reclinatae verticaliter per defaltam centra sunt et solum necessariam latitudinem capiunt. Utere .gap-*utilitates addere spatio inter items.

Primo item

Secundus item

Tertio item

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>

Utens utilitates margine horizontali sicut .ms-autoin spacers:

Primo item

Secundus item

Tertio item

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>

Et cum regulis verticalibus :

Primo item

Secundus item

Tertio item

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>

Exempla

Ad bullarum .vstackacervum et alia elementa:

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>

Forma inline cum crea .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;
}