Con la propiedad FlexBox podemos hacer sitios completos adaptables o responsive de una manera muy fácil; los FlexBox pueden acomodarse a distintas resoluciones de pantallas; además poseen una serie de propiedades que ayudan al momento de adaptar los FlexBox a distintos dispositivos con ayuda de los Media Query; los FlexBox son una mejora considerable que evitan emplear propiedades como el float o el position en conjunto con otras cuando en verdad lo que simplemente se desea es construir cajas flexibles y fluidas con distintos tamaños y que sean adaptables facilmente a la resolución del dispositivo (entiéndase pc, teléfono, tablet entre otros):

La idea de tras los FlexBox

Siguiendo un poco la documentación oficial del MDN y resumiendo lo dicho anteriormente:

Aunque los FlexBox van mucho más haya al momento de hacer una cajita flexible, fluida y adaptable, pero para esta entrega solo daremos los primeros pasos.

Iniciando con FlexBox; aprendiendo sobre la propiedad FlexBox con un ejemplo

display: flex

Básicamente consiste en declarar un contenedor (section, nav, div, etc) y definir que el contenedor es "flexible" con la regla display: flex; o display: inline-flex;

A partir de de la declaración display: flex; o display: inline-flex; el contenedor padre será un contenedor flexible; todos sus hijos se convertirán en "bloques" una vez definamos las siguientes propiedades:

Orientación: flex-direction

Indicamos cómo deseamos que se alinean los elementos hijos:

• flex-direction: row Se alinean en filas:
• flex-direction: row-reverse Se alinean en filas, pero en orden inverso:
• flex-direction: column Se alinean en columnas:
• flex-direction: column-reverse Se alinean en columnas, pero en orden inverso:

Orientación: Múltiples líneas o una sola línea con flex-wrap

Indicamos cuantas lineas tiene el contenedor flexible:

• flex-wrap: nowrap El contenedor consta de una sola línea.
• flex-wrap: wrap El contenedor consta de múltiples líneas.
• flex-wrap: wrap-reverse El contenedor consta de múltiples líneas colocadas de manera inversa.

Orientación: flex-flow = flex-direction + flex-wrap

También podemos combinar las dos propiedades anteriores en una sola:

flex-flow: <flex-direction> <flex-wrap>

flex-flow: row wrap;

Flexibilidad: flex

Con esta propiedad colocada a los elementos hijos, podemos indicar como crece un elemento con respecto a los demás dentro de su contenedor; si tenemos la siguiente jerarquía:

<section>
<div>
<h1>1</h1>
<p>Con la propiedad FlexBox podemos hacer sitios completos adaptables o ...</p>
<div>
<h1>2</h1>
<p>Con la propiedad FlexBox podemos hacer sitios completos adaptables o ...</p>
<div>
<h1>3</h1>
<p>Con la propiedad FlexBox podemos hacer sitios completos adaptables o ...</p>
</section>

Definimos las siguientes reglas con CSS

Todos tendrán en mismo tamaño:

section div:nth-child(1) { 
	flex: 1;
}
section div:nth-child(2) { 
	flex: 1;
}
section div:nth-child(3) { 
	flex: 1;
}

Si queremos que el div dos ocupe el doble que sus hermanos:

section div:nth-child(1) { 
	flex: 1;
}
section div:nth-child(2) { 
	flex: 2;
}
section div:nth-child(3) { 
	flex: 1;
}

Si queremos que el div dos ocupe el doble que sus hermanos y el uno el triple:

section div:nth-child(1) { 
	flex: 1;
}
section div:nth-child(2) { 
	flex: 1;
}
section div:nth-child(3) { 
	flex: 3;
}

Consideraciones en el uso de las FlexBox

• Emplear las propiedades min-width y min-height establecidas en auto garantiza que el elemento a mostrar sea lo suficientemente grande para que se vea su contenido.
• Utilizarlos cuando quieras mostrar elementos que se adapten al espacio disponible.

Resultado Final de nuestro ejemplo

Clic aquí para ver el ejemplo final del FlexBox en una ventana aparte.

Las propiedades flex-grow, flex-shrink y flex-basis

En una entrada anterior hablamos sobre el uso básico de los Flex: Dando los primeros pasos con FlexBox: La caja flexible con CSS3; y se explicó en qué consisten los flex:

Cosas como emplear la propiedad: display: flex para especificar que un contenedor es "flexible", se explicó el uso de la propiedad flex-direction para alterar el orden de la columna y flex-direction para especificar si los flex se deben mostrar en columnas o filas; entre otras cosas como ejemplos y consideraciones; para más información, consulte en enlace anterior.

En esta entrada emplearemos algunas propiedades que permiten personalizar más el uso de los flex según la situación; ellas son:

• flex-grow
• flex-shrink
• flex-basis

Antes de realizar la explicación de cada una de ellas, se presenta un pequeño ejemplo desde el cual podrás alterar algunos valores y ver el comportamiento:

Ejemplo tomado de: Flexbox Tester

Explicando el comportamiento del flex anterior

Una vez visto el comportamiento de los flex sobre un contenedor con un tamaño fijo (es más sencillo y fácil ver el comportamiento que toma los flex cuando su contenedor es de un tamaño fijo) las propiedades especificadas en cada uno de los inputs, expliquemos un poco cada uno de ellas.

La propiedad flex como un todo

Como muchas otras propiedades como margin o padding cuenta con una forma resumida o abreviada desde la cual podemos ahorrarnos varias líneas de código al trabajar con propiedades de la misma naturaleza; los flex también cuentan con dicha forma.

En otras palabras; para especificar las anteriores propiedades lo podemos hacer desde:

flex: flex-grow, flex-shrink, flex-basis

La propiedad flex-basis: tamaño básico

Comenzando por la última la cual es la que define el tamaño base (tal como indica su nombre) de los flex, la misma puede venir dada en pixeles porcentajes, etc; esta propiedad indica un punto de partida desde el cual el navegador se guiaría para calcular el tamaño del flex (aunque como dependiendo de las otras propiedades, este tamaño podría variar).

La propiedad flex-grow: tamaño sobrante

Esta propiedad especifica cuánto debe crecer nuestros flexs al rellenar el espacio sobrante; se especifican números; para el siguiente CSS:

.simple{
flex-grow:1
}
.doble{
flex-grow:2
}

Siguiente el ejemplo anterior, el flex con la propiedad doble tendría el doble de espacio disponible del padre que el flex con la clase simple; si quisiéramos que tuviera el triple del espacio disponible se establecería el número a establecer sería 3; en resumen:

unit grow = espacio sobrante/suma de flex-grow

dado el siguiente CSS:

.contenedor { width: 500px; } 
.item-1 { flex-basis: 150px ; flex-grow: 1 } 
.item-2 { flex-basis: 150px ; flex-grow: 2 } 
.item-3 { flex-basis: 150px ; flex-grow: 1 }

Como vemos en el ejemplo anterior, la suma de los flex es menor al tamaño del padre (sobran 50px), en ese escenario el flex de mayor tamaño sería el item-2 siguiendo la fórmula presentada anteriormente quedaría:

unit grow = 50/4 = 12.5

Sería de 12.5px por unidad:

.item-1: 12.5px
.item-2: 25px
.item-3: 12.5px

Dando el tamaño total:

.item-1: 150px + 12.5px = 170.5px
.item-2: 150px + 25px = = 185px
.item-3: 150px + 12.5px = 170.5px

En donde "espacio sobrante" es el espacio sobrante del contenedor y "suma de flex-grow" es la suma de todos los flexs en una columna.

La propiedad flex-shrink: tamaño faltante

Al contrario que la propiedad anterior, con flex-shrink se especifica el comportamiento de los flexs cuando el tamaño del contenedor es menor al de los flex que lo componen; se especifican de igual manera números:

.simple{
flex-shrink:1
}
.doble{
flex-shrink:2
}

La fórmula quedaría igual:

unit shrink = espacio sobrante/suma de flex-shrink

Dado el siguiente CSS:

.contenedor { width: 400px; } 
.item-1 { flex-basis: 150px ; flex-shrink: 1 } 
.item-2 { flex-basis: 150px ; flex-shrink: 2 } 
.item-3 { flex-basis: 150px ; flex-shrink: 1 }

Siguiente el ejemplo anterior, el flex con la propiedad doble se encogería el doble de espacio faltante del padre que el flex con la clase simple; si quisiéramos que tuviera se encogiera el triple del espacio faltante del padre se establecería el número a establecer sería 3; en resumen:

unit shrink = 50/4 = 12.5

Sería de 12.5px por unidad:

.item-1: 12.5px
.item-2: 25px
.item-3: 12.5px

Dando el tamaño total:

.item-1: 150px - 12.5px = 137,5px
.item-2: 150px - 25px = = 124px
.item-3: 150px - 12.5px = 137,5px

Y esto sería todo.

Creando una web básica con Flex en HTML

En esta entrada veremos cómo crear la clásica estructura de una página web empleando los FlexBox; anteriormente vimos como FlexBox; ahora definiremos una estructura de una página web base como la siguiente:

Anteriormente se explicó el uso de las propiedades:

• flex-grow
• flex-shrink
• flex-basis

Para definir el tamaño básico, espacio sobrante y espacio faltante de los flex y su contenedor respectivamente; estas propiedades las emplearemos en este ejemplo para crear la estructura de una web básica; si tienes dudas, puede consultar los enlaces anteriores.

 #main {
    display: -webkit-flex;
    display:  flex;
    -webkit-flex-flow: row;
    flex-flow: row;
}

#main > article {
    flex: 3 1 60%;
    order: 2;
}

#main > nav {
    flex: 1 6 20%;
    order: 1;
}

#main > aside {
    flex: 1 6 20%;
    order: 3;
}

header, footer {
    display: block;
}

Como puedes apreciar, la idea fundamental es definir el contenedor padre de los flexs con display: flex e indicando la dirección flex-flow: row (inclusive podemos indicar el orden).

Además del comportamiento, orden en que deben aparecer en una misma fila y dimensiones de los flex, empezando con el contenedor principal (article) y los respectivos menús laterales aside y nav.

Enlaces de interés

• W3schools.com: CSS flex Property
• Guía flex
• CSS3 Flexbox ejemplo original