5 técnicas Flexbox que deberías conocer

Flexbox es un estándar CSS optimizado para el diseño de interfaces de usuario. Mediante el uso de las diversas propiedades FlexBox podemos construir nuestra página a partir de pequeños bloques, que más tarde serán colocados y redimensionados de la manera que queramos de forma sencilla. Los sitios web y las aplicaciones hechas de esta manera responden y se adaptan bien a todos los tamaños de pantalla.

En este artículo vamos a echar un vistazo a cinco técnicas FlexBox que pondrán solución a las pesadillas comunes que te genera el diseño CSS. También hemos incluido ejemplos prácticos para mostrar escenarios del mundo real en el que se aplican estas técnicas.

Crear columnas de igual altura

El hecho de crear columnas con una misma altura, que puede parecer una tarea sencilla sobre el papel, es una tarea bastante molesta. A priori basta con pensar que estableciendo un min-height va a funcionar, pero no, porque una vez que la cantidad de contenido en las columnas empieza a ser diferente, algunos de ellos crecerán y otros quedarán más pequeños.

La solución a este problema utilizando Flexbox no podría ser más sencillo. Todo lo que tenemos que hacer es inicializar el flex model, y después asegurarnos de que las propiedades flex-direction y align-items tienen sus valores por defecto.

HTML

<div class="container">

    <!-- Equal height columns -->

    <div>...</div>
    <div>...</div>
    <div>...</div>
    
</div>

CSS

.container {
        /* Initialize the flex model */
	display: flex;

        /* These are the default values but you can set them anyway */
	flex-direction: row;    /* Items inside the container will be positioned horizontally */
        align-items: stretch;   /* Items inside the container will take up it's entire height */
}

Reordenar elementos

Hace tiempo, si tuviéramos que cambiar dinámicamente el orden de algunos elementos, probaríamos con algún truco de CSS, y, presos de nuestra frustración, probaríamos a hacerlo con JavaScript. Mediante Flexbox, sin embargo, esta tarea se reduce a aplicar una sola propiedad de CSS.

Se llama order y como hace lo que su nombre indica lo más sencillo posible. Nos permite intercambiar cualquier número de elementos flex y cambiar el orden en el que aparecen en pantalla. El único parámetro que hay que pasarle a esta propiedad es un número entero que determinará, claro está, la posición. Cabe decir que los números más bajos tienen una mayor prioridad.

HTML

<div class="container">

    <!-- These items will appear in reverse order -->

    <div class="blue">...</div>
    <div class="red">...</div>
    <div class="green">...</div>

</div>

CSS

.container{
	display: flex;
}

/* Reverse the order of elements */

.blue{
	order: 3;
}

.red{
	order: 2;
}

.green{
	order: 1;
}

Centrado vertical y horizontal

El centrado vertical en CSS es uno de esos problemas que nos hace preguntarnos: ¿Cómo una cosa tan trivial todavía es tan complicado de llevarlo a cabo? Y es que realmente es así. Si buscas en Google “centrado vertical CSS”, verás una cantidad infinita de diferentes técnicas, y la mayoría de ellas implicarán tablas o transformaciones, cosas que no están pensadas para hacer maquetaciones.

Flexbox ofrece una solución fácil al problema. Cada diseño flex tiene dos direcciones (el eje X y el Y) y dos propiedades separadas para su alineación. Si queremos llevarlo a cabo podemos posicionar cualquier elemento justo en el medio de su contenedor principal.

HTML

<div class="container">

    <!-- Any element placed here will be centered
         both horizonally and vertically -->

    <div>...</div>

</div>

CSS

.container{
	display: flex;

	/* Center according to the main axis */
	justify-content: center;

	/* Center according to the secondary axis */
        align-items: center;
}

Crear grids responsive

La mayoría de los desarrolladores se basan en frameworks CSS para crear grids responsive. Bootstrap es el más popular, pero hay cientos de librerías que te pueden ayudar con esta tarea. Por lo general funcionan bien y cuentan con un montón de opciones, pero suelen pesar bastante. Si eres un manitas o no quieres utilizar un framework entero sólo para un grid, Flexbox tiene la solución.

Una fila en el grid de Flexbox es simplemente un contenedor con display:flex. Las columnas horizontales dentro de él pueden ser infinitas, el ajuste del tamaño de los cuales se realiza a través de flex. El flex model se adapta al tamaño de la ventana, por lo que esta configuración debe verse bien en todos los dispositivos. Sin embargo, si decidimos que no hay suficiente espacio horizontal en la pantalla, puedes convertir fácilmente el diseño en uno vertical con una media-query.

HTML

<div class="container">

    <!-- This column will be 25% wide -->
    <div class="col-1">...</div>

    <!-- This column will be 50% wide -->
    <div class="col-2">...</div>

    <!-- This column will be 25% wide -->
    <div class="col-1">...</div>

</div>

CSS

.container{
	display: flex;
}

/* Classes for each column size. */

.col-1{
	flex: 1;
}

.col-2{
	flex: 2;
}

@media (max-width: 800px){
	.container{
		/* Turn the horizontal layout into a vertical one. */
		flex-direction: column;		
	}
}

Crear el pie fijo perfecto

Flexbox tiene una solución fácil a este problema también. Cuando desarrollamos páginas que incluyen un pie de página fijo, si lo hacemos todo en los elementos flex podemos estar seguros de que nuestro pie de página permanecerá siempre en la parte inferior de la página.

Aplicando display:flex al tag body podemos llevar a cabo todo nuestro diseño de página utilizando propiedades de flex. Una vez hecho esto, el contenido principal de la página web puede ser un elemento flex y el pie otro, lo que hace que sea muy fácil el manipular su posicionamiento y colocarlos exactamente donde queremos.

HTML

<body>
    
    <!-- All the page content goes here  -->

    <div class="main">...</div>


    <!-- Our sticky foooter -->

    <footer>...</footer>

</body>

CSS

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* The main section will take up all the available free space
      on the page that is not taken up by the footer. */
   flex: 1 0 auto;
}

footer{
   /* The footer will take up as much vertical space as it needs and not a pixel more. */
   flex: 0 0 auto;
}

Fuente: tutorialzine.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP