Psychotik

solucionando marrones desde 2003

Alineación vertical gracias a “display:flex”

Pertenece a  Tips  el 18 Junio
Alineación vertical gracias a "flexbox"

Con CSS3 se amplió la gama de características que tenía la propiedad display, una de las más interesantes es el valor flex, que nos va a permitir alinear bloques y contenidos de forma vertical, lo cual nos quitará el dolor de cabeza que suponía hasta ahora (jugar con padding, posiciones, javascript…). Su utilización es realmente sencilla y rápida, como verás a continuación para que un elemento quede alineado verticalmente con “display:flex” solo hay que decirle al bloque contenedor que sea flex-ible y al contenido concreto que sus márgenes superior e inferior sean auto, para muestra… un ejemplo:

Código CSS

/* Creamos un div contenedos y con display:flex ya le decimos que pretendemos que los elementos tengan un alineación vertical */
.flex {
   display:flex;
   display: -webkit-flex;
   width: 100%
}
/* Un div con algo de altura para ver que el efecto funciona */
.flex div:first-child {
   display: block;
   width: 300px;
   height: 150px;
   background: #00A6B6;
   border: 2px solid #0098A7;
   border-radius: 10px;
}
/* Y con los margin top y bottom en “auto” conseguimos que flex funcione perfectamente */
.flex div:last-child {
   margin-top: auto;
   margin-bottom: auto;
   padding: 20px;
}

Resultado

Este texto se debería ver alineado verticalmente con respecto de la altura del bloque azul

Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »