FlexBox: CSS3 Layout

Flexbox es un nuevo layout de CSS3. Se ha creado para mejorar la alineación, dirección y orden de los elementos incluso cuando tienen un tamaño variable o indefinido. La principal característica del contenedor flex es su capacidad de modificar la anchura y altura de sus hijos para llenar el espacio disponible de la mejor manera posible en cada resolución de pantalla.

El algoritmo de flexbox está basado en direccionalidad a diferencia de block o inline, que están basados en horizontalidad y verticalidad.

Vamos a utilizar de referencia el W3C y un artículo de scotch.io

Podemos revisar la compatibilidad con navegadores con CanIUse
 

LO BÁSICO

Modelo flexbox. El layout flex está constituído por un contenedor padre llamado flex container y sus hijos inmediatos, llamados flex items. Podemos ver el resto de elementos en este gráfico:

USO

Para preparar un contenedor para que ejerza como flex container tenemos que declarar el display: flex; Automáticamente todos sus hijos se convierten en flex items. Un flexbox item puede ser a su vez un flex container si así lo identificamos, por lo que se pueden anidar infinitamente.

PROPIEDADES DEL CONTENEDOR

Flex-Direction

Esta propiedad especifica como los flex items se colocan en el flex container, definiendo el eje principal. Valores:

• row (default)
• row-reverse
• column
• column-reverse

flex-direction: row;​


flex-direction: row-reverse;


flex-direction: column;​


flex-direction: column-reverse;

Flex-Wrap

El wrap define si queremos que el contenido se mantenga en una sola linea o si fluya en varias. Valores:

• wrap
• nowrap (default)
• wrap-reverse

flex-wrap: nowrap;​

flex-wrap: wrap;

flex-wrap: wrap-reverse;


Flex-Flow

Unifica flex-direction y flex-wrap en una sola propiedad. Toma los mismos valores de estas propiedades por separado. Primero se define el flex-direction y luego el flex-wrap. Se recomienda que se utilice este método mejor que declarar los otros dos por separado.


Justify-Content

Alinea los flex items a lo largo del eje principal del flex container. Ayuda a distribuir el espacio libre sobrante en los casos en los que los elementos de una linea son fijos o si son flexibles pero han alcanzado su limite máximo.

• flex-start (default)
• flex-end
• center
• space-between
• space-around

 

justify-content: flex-start;

justify-content: flex-end;​

justify-content: center;​

justify-content: space-around;​

justify-content: space-between;


Flex-Align

Funciona para alinear elementos de la misma manera en que lo hace justify-content, pero esta vez para el eje secundario.

• stretch (default)
• flex-start
• flex-end
• flex-container
• baseline

flexbox-align-items-stretch​;

align-items: flex-start;​

align-items: flex-end;​

align-items: center;​

align-items: baseline;​


Align-Content

Alinea las filas interiores del flex-container (no tendrá efecto si solo tenemos una) de manera parecida a como actúa justify-content sobre los flex items.

• stretch (default)
• flex-start
• flex-end
• center
• space-between
• space-around

align-content: stretch;

align-content: space-between;​

align-content: space-around;

align-content: flex-start;

align-content: flex-end;

align-content: center;​


PROPIEDADES DE LOS ITEMS

Order

Define el orden en el que aparecen los flex items. Por ejemplo utilizaremos order: -1; cuando queramos asegurarnos que ese item aparece el primero. Se utilizan numerales, sin unidades. Además, cuando varios items comparten numeral, el orden de aparición será el del html.

Nota sobre accesibilidad. Hay que tener en cuenta que la reordenación solo va a tener efecto a nivel estético, y que por tanto otras maneras de leer nuestro código van a interpretar el orden original del html. Es importante tenerlo en cuenta para que no afecte a la legibilidad de la página y su accesibilidad.




Flex-Grow

Define el factor de crecimiento. En concreto cuánto crecerá en relación con el resto de sus hermanos, cuando haya espacio disponible.

Cuando los numerales coinciden creceran de igual manera.​


El segundo elemento crece tres veces mas con respecto al resto de elementos con el espacio positivo que se va generando en el contenedor.


Flex-Shrink

Lo opuesto a flex-grow. Cuánto se encojerá en relación con el resto de items cuando el espacio empiece a faltar. No se pueden usar números negativos.  Por defecto todos los elementos se encojeran de manera solidaria, pero si utilizamos el flex-shrink: 0; ese elemento mantendrá su tamaño original.




Flex-Basis

Utiliza los mismos valores que width y height (en función de si estamos en row o en column)  y especifica el tamaño inicial de los flex item, antes de que el espacio libre se distribuya. Al reducir a una variable el “ancho” en función de la orientación de nuestro display, no hace falta cambiarlo si decidimos sustituir columna por fila.




Flex

Sería la propiedad que aglutina flex-grow, flex-shrink y flex-basis, por ese orden.

Además de todas las combinaciones posibles con esos valores, tendríamos los equivalentes a auto y a none, además del valor default:

flex: 0 1 auto; (default)

flex: 1 1 auto; (auto)

flex: 0 0 auto; (none)


​Align-Self

Sobreescribe el efecto de align-items para el elemento al que estemos apuntando. Toma sus mismos valores. El “auto” como valor por defecto anula el align-self para que herede el del padre; Si no estuviera definido, su valor sería como el de stretch.

• stretch
• auto (default)
• flex-start
• flex-end
• center
• baseline

INFO INTERESANTE

Elementos Colapsados

Con la orden visibility: collapse; se convierte en un flex item colapsado, el elemento sale del flujo, ya no existe. Pero deja un hueco de su presencia. Se recomienda su uso sobre todo cuando se colpase y abra de manera dinámica, para evitar bailes en el renderizado. Si lo que se pretende es ocultar el elemento completamente se recomienda el uso de display: none;

Float, Clear y Vertical - Align no tiene efecto

No resultan en ningún tipo de efecto sobre un elemento flex, no lo saca del flujo ni lo altera de ninguna manera.

Y para ampliar información...

Tutoriales:

Codrops – La información es muy parecida a la de este artículo, pero además tenemos pequeños playgrounds donde trastear con cada propiedad.

La rana – Una manera divertida de familiarizarnos con las diferentes propiedades de flexbox.

Bugs de flexbox:

Flexbugs, comunidad donde se recopilan y resuelven los bugs conocidos de flexbox.

Ejemplos:

Solved by flexbox – Ideas de uso y aprovechamiento de flexbox.