Saltar al contenido principal

Stack

Stack es un componente de layout que facilita la organización vertical u horizontal de elementos aplicando un espacio consistente entre ellos. Su objetivo principal es simplificar la alineación de elementos en fila o columna sin necesidad de escribir estilos adicionales para el espaciado.

Uso básico​

Usar la clase is-stack. Automáticamente genera una organización vertical y espaciado de 0.5 rem

Item 1
Item 2
Item 3
<div class="is-stack">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Direcciones​

Usa las siguientes clases para definir la dirección y los elementos siempre se alinean al centro.

tip

Si necesitas que los elementos se alineen al inicio o al final puedes usar las clases helper de flex

Vertical​

Usa la clase is-vstack para organizar los elementos verticalmente

Horizontal​

Usa la clase is-hstack para organizar los elementos horizontalmente

Espaciado​

Usa is-gap-{size} para agregar espacio entre los elementos flexibles. El size es un valor entre 0 a 6

info

Para más información de los valores de espaciado visita la documentación de personalizar espaciados

Gap: 4
Item 1
Item 2
Item 3
Gap: 2
Item 1
Item 2
Item 3