Grid

# Grid

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

En el sistema de cuadrícula, definimos el marco fuera del área de información según la fila y la columna, para garantizar que cada área pueda tener una disposición estable.

Lo siguiente es un breve vistazo de cómo funciona:

  • Establecer un conjunto de columnas en el espacio horizontal definido por fila (abreviada col)
  • Sus elementos de contenido deben colocarse directamente en la columna, y solo la columna debe colocarse directamente en la fila
  • El sistema de cuadrícula de columnas tiene un valor de 1 a 12 para representar sus intervalos de rango. Por ejemplo, w="4" puede crear tres columnas de igual ancho (33.3%).
  • Si la suma de los tramos de col en una fila es superior a 12, entonces el col desbordante en su conjunto comenzará una nueva disposición de línea.

Con la directiva w define el ancho de la columna (vs-col) su valor es 1-12, un ejemplo de tamaños sería: 12 = 100%, 6 = 50%, 4 = 25%

100%
50%
50%
33.3%
33.3%
33.3%
25%
25%
25%
25%
16.6%
16.6%
16.6%
16.6%
16.6%
16.6%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
Code copied

# Offset

Para dar una distancia con respecto a la izquierda tenemos la propiedad offset que con las mismas medidas 1 - 12 añadimos el espacio especifico, un ejemplo seria: 12 = 100%, 6 = 50%, 4 = 25%.

offset = 6
offset = 2
offset = 8
offset = 7
offset = 4
Code copied

# Flex Justify

Si tenemos que alinear los elementos en horizontal, utilice la justify directiva que utiliza CSS atributos como parámetros: flex-start, center, flex-end, space-around, space-between.

Default 1
Default 2
Default 3
Center 1
Center 2
Center 3
Flex-end 1
Flex-end 2
Flex-end 3
Space-around 1
Space-around 2
Space-around 3
Space-between 1
Space-between 2
Space-between 3
Code copied

# Flex Align

Si tenemos que alinear los elementos en Vertical, utilice la align directiva que utiliza CSS atributos como parámetros: flex-start, center, flex-end, space-around, space-between.

También tenemos la propiedad direction que hace referencia a la propiedad css flex-direction para cambiar la dirección de todos los elementos (por defecto se row)

Default 1
Default 2
Default 3
Center 1
Center 2
Center 3
Flex-end 1
Flex-end 2
Flex-end 3
Space-around 1
Space-around 2
Space-around 3
Space-between 1
Space-between 2
Space-between 3
Code copied

# Flex Order

En algunos casos, queremos ordenar los elementos a nuestro gusto. Para hacer esto, use la propiedad order tiene un parámetro, solo tiene que pasar el número en el que queremos ordenar vs-col respecto a sus hermanos vs-col dentro de un mismo vs-row

1
2
3
4
Code copied

# Responsive

Hay algunas medidas que solo se pueden agregar en un tamaño específico del dispositivo, las directivas son:

  • lg: es para dispositivos grandes como computadoras de escritorio o portátiles (grandes).
  • sm: es para dispositivos medianos como computadoras portátiles o tabletas.
  • xs: es para dispositivos pequeños como tabletas (pequeñas) y teléfonos.
2
8
2
Code copied
Last Updated: 18/6/2020 12:56:36