Diseño de caja flexible
Con el advenimiento de CSS Flexible Box , muchas de las pesadillas de los diseñadores web 1 se han resuelto. Uno de los más hacky, la alineación vertical. Ahora es posible incluso en alturas desconocidas .
"Dos décadas de hacks de diseño están llegando a su fin. Quizás no mañana, sino pronto, y por el resto de nuestras vidas".
- El legendario CSS Eric Meyer en W3Conf 2013
Flexible Box (o en resumen, Flexbox), es un nuevo sistema de diseño que está específicamente diseñado para fines de diseño. La especificación establece :
El diseño flexible es superficialmente similar al diseño de bloque. Carece de muchas de las propiedades más complejas centradas en texto o documento que se pueden usar en el diseño de bloques, como flotantes y columnas. A cambio, obtiene herramientas simples y poderosas para distribuir el espacio y alinear el contenido de la manera que las aplicaciones web y las páginas web complejas a menudo necesitan.
¿Cómo puede ayudar en este caso? Bien, veamos.
Columnas alineadas verticales
Usando Twitter Bootstrap tenemos .rows teniendo algunos .col-*s. Todo lo que necesitamos hacer es mostrar el .row2 deseado como una caja de contenedor flexible y luego alinear todo su elemento flexible verticalmente (las columnas)align-items propiedad.
EJEMPLO AQUÍ (Lea los comentarios con cuidado)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
La salida
El área coloreada muestra el cuadro de relleno de las columnas.
Aclarando sobre align-items: center
8.3 Alineación de ejes cruzados: el align-items propiedad
Los elementos flexibles se pueden alinear en el eje transversal de la línea actual del contenedor flexible, de forma similar justify-contentpero en la dirección perpendicular. align-itemsestablece la alineación predeterminada para todos los elementos del contenedor flexible, incluidos los anónimos los elementos flexibles .
align-items: center;
Por valor central, el cuadro de margen del elemento flexible está centrado en el eje transversal dentro de la línea.
Gran alerta
Nota importante n. ° 1: Twitter Bootstrap no especifica el número widthde columnas en dispositivos extra pequeños, a menos que asigne una de las .col-xs-#clases a las columnas.
Por lo tanto, en esta demostración en particular, he usado .col-xs-*clases para que las columnas se muestren correctamente en modo móvil, porque especifica widthexplícitamente la columna.
Pero, alternativamente, puede desactivar el diseño de Flexbox simplemente cambiando display: flex;a display: block;tamaños de pantalla específicos. Por ejemplo:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
O puede especificar .vertical-align solo en tamaños de pantalla específicos de esta manera:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
En ese caso, seguiría el enfoque de @KevinNelson .
Nota importante # 2: omiten los prefijos de proveedor debido a la brevedad. La sintaxis de Flexbox ha cambiado durante el tiempo. La nueva sintaxis escrita no funcionará en versiones anteriores de navegadores web (¡pero no tan antigua como Internet Explorer 9! Flexbox es compatible con Internet Explorer 10 y versiones posteriores).
Esto significa que también debe usar propiedades con prefijo de proveedor como display: -webkit-box etc., en modo de producción.
Si hace clic en "Alternar vista compilada" en la demostración , verá la versión prefijada de las declaraciones CSS (gracias a Autoprefixer ).
Columnas de altura completa con contenido alineado verticalmente
Como puede ver en la demostración anterior , las columnas (los elementos flexibles) ya no son tan altas como su contenedor (la caja del contenedor flexible)..row elemento).
Esto se debe al uso de centervalor para la align-itemspropiedad. El valor predeterminado es stretchpara que los elementos puedan llenar toda la altura del elemento primario.
Para arreglar eso, también puede agregar display: flex;a las columnas:
EJEMPLO AQUÍ (Nuevamente, tenga en cuenta los comentarios)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
La salida
El área coloreada muestra el cuadro de relleno de las columnas.
Por último, pero no menos importante , tenga en cuenta que las demostraciones y los fragmentos de código aquí están destinados a darle una idea diferente, para proporcionar un enfoque moderno para lograr el objetivo. Tenga en cuenta la sección " Big Alert " si va a utilizar este enfoque en sitios web o aplicaciones del mundo real.
Para leer más, incluido el soporte del navegador, estos recursos serían útiles:
1. Alinee verticalmente una imagen dentro de un div con altura receptiva
2. Es mejor usar una clase adicional para no alterar el valor predeterminado de Twitter Bootstrap .row.
div, no el texto dentro, algo como esto jsfiddle.net/corinem/Aj9H9 pero en este ejemplo no uso bootstrap