Una Introducción al Módulo CSS Flexbox

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

A pesar de la percepción relativamente baja del techo de habilidades para CSS, siempre parece tener una característica asesina bajo la manga. ¿Recuerda cómo las media queries hicieron posibles los diseños adaptativos y revolucionaron el desarrollo front-end? Bueno, hoy, vamos a hablar de un nuevo modo de diseño, llamado flexbox - nuevo en CSS3. ¡Estoy seguro de que está ansioso por continuar! Empecemos después del salto.

Cambios Sucesivos a las Técnicas y al Software

Ciertos aspectos de las aplicaciones o técnicas utilizadas en este tutorial han cambiado desde su publicación original. Esto podría hacer que sea un poco difícil de seguir. Recomendamos consultar los tutoriales más recientes sobre el mismo tema:

Soporte CSS Flexbox

Actualmente, la especificación CSS Flexbox es un borrador de trabajo y ¡las cosas cambiarán! Los ejemplos cubiertos por este tutorial podrían fallar en el futuro, ya que los navegadores cambian su implementación de flexbox para que coincida con la especificación. El objetivo de este tutorial es proporcionarle una comprensión básica de CSS flexbox y demostrar cómo usarlo en sus páginas web.

Por favor tenga en cuenta que este tutorial utilizará ejemplos con prefijo webkit/sin prefijo por motivos de brevedad. Eche un vistazo a caniuse.com para obtener una lista de navegadores compatibles con el módulo flexbox y de acuerdo a est, referencie los prefijos necesarios en sus proyectos.

Antecedentes Sobre los Modos de Disposición

CSS Flexbox es esencialmente un modo de disposición. Existen modos de disposición dentro de CSS que han estado allí durante mucho tiempo. Un ejemplo de un modo de disposición es block (por ejemplo, display: block). Las disposiciones de bloque son una gran manera de diseñar documentos enteros, muchos elementos son tratados por el navegador como nivel de bloque por defecto; estos incluyen elementos comunes, como párrafos y divs.

Ocasionalmente, cuando un elemento no es block, es probable que esté inline. Los elementos de nivel inline incluyen la etiqueta de ancla, la etiqueta de input y la etiqueta strong. Las herramientas de desarrollador de Chrome de hecho le permiten ver el "estilo computado" de un elemento, que es una gran manera de determinar qué propiedades y valores CSS se han aplicado a elementos que no fueron declarados explícitamente por el desarrollador.

Aquí hay una sugerencia rápida para acceder al estilo computado de un elemento mediante el método JavaScript window.getComputedStyle.

1
2	var elem = document.querySelector('h1#someId');
3	window.getComputedStyle(elem).display; //block

Aparte de las disposiciones block e inline, CSS también tiene modos de disposición en tabla y con posicionamiento. La razón por la que se hacen referencias a los modos de disposición es porque flexbox es un nuevo modo de disposición, el cual permite una mayor flexibilidad al diseñar páginas web.

La disposición de flexbox nos proporciona técnicas simples para dictar fácilmente la manera en que se van a diseñar los elementos.

¿Cómo Puede Usted Utilizar Flexbox?

Para forzar a un elemento a usar la disposición flexbox, agregamos el valor de flexbox a la propiedad display.

1
2	#container {
3	display: flexbox;
4	}

De forma predeterminada, un elemento flexbox es un elemento de nivel block; podemos definir un elemento inline así:

1
2	#container {
3	display: inline-flexbox;
4	}

De forma similar al ejemplo anterior, usted querrá aplicar el diseño de flexbox al elemento padre de los hijos cuya posición usted desea controlar. Veamos un ejemplo sencillo en vivo.

1
2	<ul>
3	<li>An item</li>
4	<li>Another item</li>
5	<li>The last item</li>
6	</ul>


ul {
	/* Old Syntax */
	display: -webkit-box;

	/* New Syntax */
	display: -webkit-flexbox;      
}

Usted notará que los componentes del elemento de lista ahora fluyen horizontalmente, similar a cómo podrían interprestarse, si hubiéramos usado float: left. Los componentes del elemento de lista ahora se pueden denominar elementos de flexbox.

Nota: un descendiente directo de un flexbox, que está posicionado de forma absoluta, por ejemplo utilizando position: absolute, no puede ser un elemento de flexbox, ya que rompe el flujo habitual.

Usted podrá notar que los elementos (componentes del elemento lista) han asumido un flujo horizontal (la dirección del flujo también se conoce como el eje principal). Afortunadamente, somos capaces de controlar este flujo (y por lo tanto lo que se considera como el eje principal) y evitar el uso de floats!

Explorando `flex-direction`

Podemos aplicar la propiedad flex-direction y especificar la dirección en la que deseamos que nuestros elementos flexbox se posicionen. La propiedad acepta row, row-reverse, column y column-reverse como valores. El valor predeterminado es row.

Utilizando marcado similar al ejemplo anterior, podemos agregar una par propiedad:valor CSS: (flex-direction: column)

1
2	ul {
3	-webkit-flex-direction: column;
4	}

Si está trabajando con el ejemplo, siga adelante e intente cambiar el valor column en la propiedad flex-direction a column-reverse y preste atención a cómo se muestran los elementos flexbox en un diseño columnado, pero en orden inverso.

Envolviendo Con `flex-wrap`

Por defecto un flexbox es de una sola línea. Uno que no pueda contener más a sus hijos puede desbordarse usando la propiedad flex-wrap; podemos dar la instrucción al elemento flexbox para que se convierta en multi-línea, en cuyo caso los elementos flexbox pueden ser envueltos. flex-wrap acepta los valores nowrap (el valor por defecto), wrap & wrap-reverse.

Observe cómo en la demostración, los elementos 'sobreenvuelven', ya que no pueden estar contenidos dentro de su pequeño padre de 100px. Utilizando las herramientas de desarrollador, intente alternar entre overflow: hidden y -webkit-flex-wrap. Sin las propiedades de flex-wrap y overflow los elementos desbordan a sus padres.

Hay una propiedad abreviada útil para flex-direction y flex-wrap, como se muestra a continuación:


flex-direction: row;
flex-wrap: nowrap;

//Using the two values above with the flex-flow shorthand we get:
flew-flow: row nowrap;

//flex-direction: column; flex-wrap: wrap;
flex-flow: column wrap;

Un Ejemplo Rápido

Aunque ciertamente no es el que mejor se ve, este menú de ejemplo demuestra algunos usos para flexbox.

Una anchura de 300px se ha fijado en el flexbox mismo, para demostrar envolver.
Una idea general para un menú podría ser utilizar las media queries con el fin de presentar un menú móvil amigable, en el que flex-direction: column podría tener sentido.

Lo que sería bueno es instruir a los elementos de flexbox a extenderse y utilizar el espacio que tienen disponible para ellos - algo así. Para eso es la propiedad flex.

Flexing

Flexing es la habilidad del contenedor para alterar su anchura o altura con el fin de llenar el espacio disponible. "

La propiedad flex es una buena característica; ofrece algo nuevo que habría sido difícil de lograr en el pasado.

Con esta propiedad, podemos fijar un tamaño preferido para nuestros elementos. Tenga en cuenta que la propiedad flex se aplica a los elementos flexbox, no al flexbox en sí. El navegador intentará establecer el tamaño de los elementos flexbox línea por línea. Luego tratará de distribuir uniformemente el espacio libre restante en los elementos. Si miramos el ejemplo del menú y usamos las herramientas de desarrollo para descubrir el ancho computado de los elementos de flexbox, veremos que es 78px. Investiguemos más allá ...

Probablemente se esté preguntando: "¿Cómo ganaron los elementos de flexbox el espacio extra si establecimos su ancho preferido en 60px?"

En la primera línea, hay tres elementos, que deberían estar en la propiedad flex de alrededor de 60px (que es un total de 180px).
El ancho de toda la flexbox es de 300px. Eso, menos 180px (el tamaño total preferido de los elementos), es 120px. Sin embargo, no parece que en realidad tenemos 120px de espacio libre.
Cada elemento de flexbox tiene un margin-right de 10px; lo que da un total de 30px para tres elementos, dejándonos con 90px de espacio libre.
Pero espere, cada artículo también tiene padding: 5px - que son 5px de relleno arriba, a la derecha, abajo y a la izquierda. Así, similar a la propiedad margin-right, cada elemento utiliza hasta 10px de relleno con respecto a su anchura. Nos quedamos con 60px de espacio libre - bueno casi.
Cada elemento tiene border: 1px solid black - 1px en los lados izquierdo y derecho. Un total de dos píxeles por elemento, por lo que para tres elementos, llegamos a 6px. Ahora nos quedamos con 54px de espacio libre.
Con 54px de espacio libre, podemos distribuirlo por igual a los tres elementos de la primera línea, es decir 18px por elemento, lo que ahora tiene sentido porque si establecemos una preferencia de 60px, la anchura computada se conviertiría en 78px.

Como ya habrá adivinado, la última línea (conteniendo el elemento 'Contact us') se flexiona a toda la anchura de la flexbox.

Los elementos de Flexbox pueden recibir diferentes anchos; un elemento con un flex de 2 se dice que es el doble de flexible que un elemento con un flex de 1. Por lo tanto, cuando se trata de distribuir el espacio libre entre los dos elementos, al elemento con un flex de 1 se dará la mitad del espacio que el artículo con un flex de 2 recibirá.

Ordenamiento

Flexbox nos ofrece una forma sencilla de ordenar determinados elementos mediante CSS, independientemente del orden en que aparezcan en el documento. Aquí un ejemplo rápido.

Dado el siguiente marcado:

1
2	<ul>
3	<li>Item 1</li>
4	<li>Item 2</li>
5	<li>Item 3</li>
6	</ul>


ul {
	display: -webkit-flexbox;
}

ul li:nth-child(1) {
	-webkit-flex-order: 2;
}

Podemos apuntar al primer componente del elemento lista utilizando la pseudo clase nth-child y luego aplicar la propiedad flex-order sobre él. Los elementos de Flexbox están de forma predeterminada, en el orden 0. Colocando el primer elemento de lista en el orden 2, el navegador mostrará primero los elementos 2 y 3, que serán seguidos por el elemento 1.

Alineación

Somos capaces de alinear los elementos flexbox en el eje principal utilizando la propiedad de flex-pack. Esta propiedad acepta los siguientes valores:

start
end
center
justify
distribute

La demostración de este tutorial proporciona algunos ejemplos de los diferentes tipos de alineación. Observando el ejemplo en jsbin, podemos ver que los items sólo se han centrado en un eje: el eje principal. Éste es esencialmente el eje sobre el cual se ubican los elementos flexbox.

Podemos cambiar el eje ajustando la propiedad flex-direction. Al establecerlo en column, se hace evidente que el eje principal ha cambiado. Con el fin de afectar la alineación del eje transversal, (el eje perpendicular al eje principal) podemos utilizar flex-align.

Centrando un Elemento

1
2	<div class="flexbox">
3	<p>I should be centered</p>
4	</div>


.flexbox {
	display: -webkit-flexbox;    
	-webkit-flex-pack: center;
	-webkit-flex-align: center;
	width: 50%;
	height: 100px;
	background: orange;
}

.flexbox p {
	border: 1px solid green;
	padding: 5px;
}

Definitivamente revise la demostración en vivo si usted está confundido.

Lecturas Adicionales

flexiejs ofrece compatibilidad cruzada entre navegadores para flexbox.
Modernizr puede detectar soporte para flexbox.
html5rocks contiene un tutorial sobre flexbox
Alex Russell, quien trabaja en Google Chrome, tiene un interesante conjunto de clases CSS para usar flexbox.
insertthtml tiene un divertido tutorial sobre la especificación flexbox, que incluye un gran conjunto de imágenes que pueden ayudar en la comprensión de ciertos conceptos.
El libro Stunning CSS3 tiene una sección sobre flexbox.

Gracias por leer y asegúrese de consultar caniuse.com para obtener una lista de navegadores compatibles con el módulo flexbox, así como cuáles prefijos de fabricantes deben ser referenciados.