Un problema bastante común es ordenar o alinear los bloques/módulos en una página web, los div, a veces parece complicado ordenarlos como nos gustaria.
Muchas veces el programa editor no alinea en la dirección que nos gustaria o simplemente no tiene opciones al respecto.
Hoy veremos un sistema bastante sencillo, que solo cuesta algo de esfuerzo la primera vez que lo usemos y en adelante solo será necesario usar un par de clases para lograrlo
Lo primero entrar en esta página:
https://the-echoplex.net/flexyboxes/
Esta en ingles, pero es bastante intuitiva y modificando los desplegables arriba a la derecha en seguida conseguiremos el resultado final deseado.
Una vez satisfechos tenemos que hacer dos cosas
Copiar y pegar el texto css generado, aquí para mi gusto hay que cambiar algún detalle que explico después del código.
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
Y sigue por cada elemento a ordenar, recomiendo ignorar todos menos el primer elemento y cambiar el selector de esta forma
Si nuestro tema no nos permite insertar codigo css personalizado tenemos plugins para ello, como no, el simple custom css o cualquier otro similar nos valdria.
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
También cambiaría el .flex-container por algo mas especifico, para tener claro como ordena y poder utilizar la clase en el futuro, por ejemplo .flex-container-centrado.
Así tendremos un código valido para este y cualquier sección ordenada que queramos hacer en un futuro.
A continuación solo nos faltaria asignar las dos classes .flex-container y .flex-item, el primero va a la división/contenedor y el segundo a los módulos/divisiones a ordenar, es importante que el contenedor sea padre directo de lo que queramos ordenar.
En el editor de bloques de wordpress la clase se asigna en la columna de la derecha teniendo seleccionado el elemento, abajo de todo en opciones avanzadas.
Ejemplo:
<div class=”flex-container”>
<div class=”flex-item”>Contenido del elemento</div>
<div class=”flex-item”>Contenido del elemento</div>
<div class=”flex-item”>Contenido del elemento</div>
<div class=”flex-item”>Contenido del elemento</div>
</div>
Se pueden poner la cantidad de elementos a ordenar que queramos, seleccionando la opción wrap en cuanto se llene el espacio se posicionaran debajo automáticamente,
Con la posibilidad de ordenar dentro de cualquiera de los hijos con este mismo sistema esto nos permite un control bastante grande de como queremos que se vean los elementos.
Si os ha gustado la guia dejadme un comentario, también os pido que paséis a mirar páginas que hemos creado https://onirowebs.com/clientes/ y si conocéis a alguien que quiera una página Web profesional seria de gran ayuda, servicio 100% personalizado.
0 comentarios