Guía básica

Flexbox CSS

"Hasta el infinito... ¡y más allá!"

¡Hola y bienvenid@s!

Mi nombre es José J. Peleato Pradel.

¿Qué es Flexbox layout?

En el pasado, en CSS se ha utilizado diferentes técnicas de trabajo en la ubicación de los elementos de una página, desde el posicionamiento (static, relative, fixed, abolute, etc), elementos en línea o en bloque (inline, inline-block, block) o los ultra conocidos y actualmente semi odiados: float.

Un sistema de creación de diseño difícil de adaptar a los objetivos y metas que nos exigen a nivel profesional hoy en día.

Desarrollos de aplicaciones de escritorio, dispositivos móviles, infinitas resoluciones, etc, necesitan de un paso más allá.

En los años 2000, el acceso a Internet a través de los dispositivos móviles tuvo un crecimiento exponencial y motivo en la comunidad el tener que trabajar con sistemas de diseños adaptables por la creciente variedad de resoluciones.

Pero, no es hasta partir de los años 2010, donde el uso de populares frameworks Web/JavaScript, como Bootstrap, inspiraron el comienzo de las especificaciones CSS Flex-box y Grid layout.

La propiedad CSS flex-box layout es un modelo de diseño web de CSS 3 actualmente en estado Candidate recommendation (CR) por el consorcio W3C en las especificaciones CSS.

Permite definir los elementos de una página para que se comporten de forma predecible cuando el diseño de la página se adapta a diferentes resoluciones.

Compatibilidad actual semi-total:

Can I use display: flex?

El concepto de Flexbox

Los elementos pueden ubicarse en cualquier dirección y pueden tener dimensiones flexibles para adaptarse al espacio visible.

Posicionar los elementos en diseños complejos puede hacerse de una forma sencilla, clara y con un código más limpio, ya que el orden de visualización es independiente al orden que estos tengan en el DOM.

El algoritmo del modelo de diseño de "Flex" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "block", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "inline", que asume una disposición horizontal.

Terminología de Flexbox

Diagrama

Flex container

Elemento padre que contiene todos los flex items. Usando la propiedad display el contenedor se puede definir como flex o inline-flex

.container { display: flex; }
.inline-container { display: inline-flex; }

inline-flex no hace que los flex items se muestren en linea. Hace que flex container se visualice en linea. No hay ninguna diferencia en el efecto sobre los flex items.

Flex item

Cualquier elemento hijo en el interior del flex container se considera un flex item.

Cualquier texto dentro del elemento contenedor se envuelve automáticamente en un flex item anónimo.

Axes

Cada diseño de flexbox sigue dos ejes:

Main axis: Eje principal que tiene una orientación específica. Por defecto, es en horizontal (row).
Cross axis: Eje secundario siempre perpendicular al eje principal.

Si main axis es en horizontal, cross axis será en vertical, y viceversa.

Flex-direction

Establece el eje principal para que se oriente en horizontal (por defecto) o vertical.

Propiedad	Valor	Significado
flex-direction:	row \| row-reverse \| column \| column-reverse	Cambia la orientación del eje principal.

Flex-wrap

Los Flex item pueden disponerse en una sola o varias líneas de acuerdo con la propiedad, que controla la dirección del Cross axis y la dirección en la que las nuevas líneas se apilan.

Propiedad	Valor	Significado
flex-wrap:	nowrap \| wrap \| wrap-reverse	Evita o permite el desbordamiento (multilinea).

Valores de la propiedad Flex-wrap

Valor	Descripción
nowrap (por defecto)	Establece los ítems en una sola línea (no permite que se desborde el contenedor).
wrap	Establece los ítems en modo multilínea (permite que se desborde el contenedor).
wrap-reverse	Establece los ítems en modo multilínea, pero en dirección inversa.

Flex-flow

Atajo (short-hand) que tiene como función resumir los valores de las propiedades flex-direction y flex-wrap

.container {
    display: flex;
    /* flex-flow: [flex-direction] [flex-wrap] */
    flex-flow: row wrap;
}

Justify-content

Tiene como función colocar los ítems de un contenedor mediante una disposición concreta a lo largo del eje principal.

Propiedad	Valor	Actúa sobre
justify-content:	flex-start \| flex-end \| center \| space-between \| space-around	Eje principal

Valores de la propiedad Justify-content

Valor	Descripción
flex-start (por defecto)	Agrupa los ítems al principio del eje principal.
flex-end	Agrupa los ítems al final del eje principal.
center	Agrupa los ítems al centro del eje principal.
space-between	Distribuye los ítems dejando (el mismo) espacio entre ellos.
space-around	Distribuye los ítems dejando (el mismo) espacio a ambos lados de cada uno de ellos.

Align-items

Determina el valor predeterminado de cómo se colocan los Flex items en el eje transversal en cada línea.

Align-content

La propiedad CSS align-content ajusta las líneas dentro de un contenedor flex cuando hay espacio extra en el eje transversal.

Align-self

La propiedad CSS align-self alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de align-items. Si el límite transversal de alguno de los elementos está definido como auto, el valor de align-self es ignorado.

Flexbox Froggy

Un juego para aprender

Jugar

¡FIN!

Simplemente, GRACIAS