GUÍA BÁSICA

Flexbox CSS

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

by jjpeleato.com

¡Gracias y bienvenid@s!

Mi nombre es José Javier Peleato Pradel. Actualmente trabajo como Full-stack Developer #PHP/#JS.

Adepto del desarrollo en #WordPress, colaboro en la organización de la comunidad #WordPress Zaragoza y he participado como organizador principal de la WordCamp Zaragoza 2018.

by jjpeleato.com

¿Qué es Flexbox layout?

by jjpeleato.com

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.

by jjpeleato.com

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á.

by jjpeleato.com

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.

by jjpeleato.com

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.

by jjpeleato.com

Compatibilidad actual semi-total:

Flexbox compatibility

Can I use display: flex?

by jjpeleato.com

El concepto de Flexbox

by jjpeleato.com

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.

by jjpeleato.com

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.

by jjpeleato.com

Terminología de Flexbox

by jjpeleato.com

Diagrama

Flexbox terms

by jjpeleato.com

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.

by jjpeleato.com

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.

by jjpeleato.com

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.

by jjpeleato.com

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.

by jjpeleato.com

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).

by jjpeleato.com

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.

by jjpeleato.com

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;
}

by jjpeleato.com

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

by jjpeleato.com

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.

by jjpeleato.com

Flexbox justify-content

by jjpeleato.com

Align-items

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

by jjpeleato.com

Align-content

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

by jjpeleato.com

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.

by jjpeleato.com

Flexbox Froggy

Un juego para aprender

Jugar

by jjpeleato.com

¡FIN!

Simplemente, GRACIAS

by jjpeleato.com