Pilas rehegua

Umi pytyvõhára taquigrafía omopu’ãva ore utilidad flexbox ári ojapo hag̃ua componente ñemohenda pya’eve ha ndahasýi araka’eve.

Ko páhinape

Umi pila oikuaveꞌe peteĩ tape mbyky ojepuru hag̃ua heta flexbox mbaꞌekuaarã ojejapo hag̃ua pyaꞌe ha ndahasýiva umi diseño Bootstrap-pe. Opaite crédito concepto ha implementación rehegua oho proyecto Pylon código abierto rehegua .

¡Akã yvate! Nda’aréi oñembojoapy Safari-pe pytyvõ umi purupyrã gap rehegua flexbox reheve, upévare ehechami emoañete hag̃ua ne kundahára pytyvõ reipotáva. Rejilla ñemohenda ndorekóiva’erã mba’eveichagua mba’e. Emoñe'êve .

Ñembo'yakua

Eipuru .vstackejapo hag̃ua umi diseño vertical. Umi mbaꞌe oñembojoajúva haꞌehína ipypukukue ñepyrũrã. Eipuru .gap-*umi utilidad emoĩ hag̃ua espacio umi mba’e apytépe.

Peteĩha mba’e

Mokõiha mba’e

Mbohapyha mba’e

html rehegua

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

Ipekuévo

Eipuru .hstackumi diseño horizontal-pe g̃uarã. Umi mbaꞌe oñembohekopyréva oñecentra verticalmente por defecto ha ogueraha ipypuku oñeikotevẽva añoite. Eipuru .gap-*umi utilidad emoĩ hag̃ua espacio umi mba’e apytépe.

Peteĩha mba’e

Mokõiha mba’e

Mbohapyha mba’e

html rehegua

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

Oipurúvo umi utilidad margen horizontal rehegua haꞌeháicha .ms-autoespaciador ramo:

Peteĩha mba’e

Mokõiha mba’e

Mbohapyha mba’e

html rehegua

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

Ha umi regla vertical reheve : .

Peteĩha mba’e

Mokõiha mba’e

Mbohapyha mba’e

html rehegua

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

Tembiecharã

Eipuru .vstackemohenda hag̃ua umi botón ha ambue elemento:

html rehegua

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

Ejapo peteĩ formulario en línea orekóva .hstack:

html rehegua

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

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