Estructuras de contenido

CLASE DEL CONTENDOR

.row
{display:flex; flex-wrap:wrap}
clase general del contendor de módulos

.r1 > div {padding:50px}
clase específica del contenedor

CLASES DISTRIBUCIÓN DE MÓDULOS

El contenedor se compone de 12 columnas. Los módulos se distribuirán según las siguientes clases

.col-2 {width: 16.66% }
.col-3
{width: 25% }
.col-4
{width: 33.33% }
.col-6
{width: 50% }
.col-8
{width: 66.66% }
.col-12
{width: 100%}

.col-2 {width: 16.66%}


.col-2 {width: 16.66%}


.col-2 {width: 16.66%}


.col-3 {width: 25%}


.col-3 {width: 25%}


.col-8 {width: 66.66%}


.col-4 {width: 33.33%}


.col-6 {width: 50%}


.col-6 {width: 50%}


.col-12 {width: 100%}


CLASE DEL CONTENEDOR

.row 
{display:flex; flex-wrap:wrap}
clase general del contendor de módulos

.r2 > div {padding:25px}
clase específica del contenedor


.justify-content-center {justify-content:center}
justificacion del bloque de módulos en el centro del contenedor.

CLASES DE JUSTIFICACIÓN DE COLUMNAS


.justify-content-start {justify-content:flex-start}
justificacion del bloque de módulos a la izquierda del contenedor.

.justify-content-center {justify-content:center}
justificacion del bloque de módulos en el centro del contenedor.

.justify-content-end {justify-content:flex-end}
justificacion del bloque de módulos a la derecha del contenedor.

.justify-content-between {justify-content:space-between}
justificacion al ancho del contendor.

.justify-content-around {justify-content:space-around}
justificacion al ancho del contenedor con la misma distancia entre columnas.

.justify-content-evenly {justify-content:space-evenly}
justificacion al ancho del contenedor con la misma distancia entre columnas y borde del contenedor.

.col-3 {width: 25%}


.col-3 {width: 25%}


.col-4 {width: 33.33%}


.col-6 {width: 50%}


.row  {display:flex; flex-wrap:wrap}
clase general del contendor de módulos

.r2 > div {padding:25px}
clase específica del contenedor


.justify-content-start {justify-content:flex-start}
justificacion del bloque de módulos a la izquierda del contenedor.

.col-3 {width: 25%}


.col-3 {width: 25%}


.col-4 {width: 33.33%}


.col-6 {width: 50%}