Mi amigo Flexbox

Drupalcamp Spain 2016

Pako Garcia @pakmanlh

¿Quien soy?

• Pako Garcia
• Drupal Front-end developer
• Miembro de
• Vegan
• 日本語の学生

¿Que / Quien es Flexbox?

• Nuestro gran amigo / aliado.
• Un concepto revolucionario.
• Un nuevo modelo de disposición de cajas.
• Está cocinándose.

¿Que permite?

• Adaptar los elementos de dentro de un contenedor dependiendo de su contenido.
• Reordenar y cambiar la alineación de los elementos (tanto vertical como horizontal).
• Crear grids o layouts fácilmente adaptables. Sin floats ni widths.
• Liberarnos de los muros a la hora de imaginar / crear componentes.

¿Que permite?

¿Como funciona?

• Se necesita un elemento contenedor.
• Con un nuevo valor propiedad CSS3:

.elemento-contenedor {
  display: flex; /* inline-flex;*/
}

¿Como funciona?

• Se define el eje principal en el que se dispondrán los elementos contenidos.
• Por defecto es horizontal (row), pero puede ser vertical (column).

.elemento-contenedor {
  display: flex;
  flex-direction: column; /* row; por defecto */
}

¿Como funciona?

• Se define si los elementos se forzarán a estar en una única línea o bien podrán ser envueltos en varias líneas.

.elemento-contenedor {
  display: flex;
  flex-wrap: wrap; /* nowrap; por defecto */
}

¿Como funciona?

• Ambas propiedades (direction y wrap), pueden simplificarse usando una sóla.

.elemento-contenedor {
  display: flex;
  flex-flow: column nowrap;
}

¿Como funciona?

• Los elementos que incluya el contenedor disponen de otras propiedades CSS3

.elemento {
  flex-grow: 1; /* 0 por defecto */
  flex-shrink: 0; /* 1 por defecto */
  flex-basis: 200px; /* auto por defecto */
}

¿Como funciona?

• O en lugar de tres propiedades, una única propiedad simplificada que incluya las tres anteriores:
• Mismo paradigma que font: (font-size, font-family, font- ... )

.elemento {
  flex: 1 0 200px; /* grow shrink basis */
}

¿Como funciona?

Propiedad elemento flex-grow

• Con valor 1 permite que el elemento pase a ocupar el espacio sobrante del eje principal.

¿Como funciona?

Propiedad elemento flex-shrink

• Define el nivel de encogimiento del elemento al reducir el tamaño del contenedor.

¿Como funciona?

Propiedad elemento flex-basis

• Especifica el tamaño inicial del elemento.

flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

¿Como funciona?

Propiedad elemento flex-basis

• Especifica el tamaño inicial del elemento.

.elemento {
  flex-basis: 150px;
}

Ejemplo:

• O de una simplificada que incluya los tres anteriores:

.elemento {
  flex: 1 0 200px; /* grow shrink basis */
}

Ejemplo flex-wrap:

• Los elementos se envuelven en varias líneas.

.contenedor {
  flex-wrap: wrap;
}
.elemento {
  flex: 1 0 45%; /* grow shrink basis */
}

Ejemplo flex-wrap:

• Los elementos se envuelven en varias líneas.

.contenedor {
  flex-wrap: wrap-reverse;
}
.elemento {
  flex: 1 0 45%; /* grow shrink basis */
}

Alineacion de elementos

• Alineación en el eje principal.

.contenedor {
  justify-content: flex-end; /* flex-start; por defecto */
}

Alineacion de elementos

• Alineación en el eje principal.

.contenedor {
  justify-content: center; /* centrados */
}

Alineacion de elementos

• Alineación en el eje principal.

.contenedor {
  justify-content: space-between; /* distribuyendo espacios */
}

Alineacion de elementos

• Alineación en el eje principal.

.contenedor {
  justify-content: space-around; /* distribuyendo espacios */
}

¿Como funciona?

Alineacion de elementos

• Alineación en el eje secundario.

.contenedor {
  align-items: stretch;
}

¿Como funciona?

Alineacion de elementos

• Alineación en el eje secundario.

.contenedor {
  align-items: flex-end;
}

¿Como funciona?

Alineacion de elementos

• Alineación en el eje secundario.

.contenedor {
  align-items: center;  /* flex-start | baseline */
}

Alineacion de contenido

• Alineación en el eje secundario, con más de una línea de contenido.

.contenedor {
  flex-wrap: wrap;
  align-content: flex-start;
}

Alineacion de contenido

• Alineación en el eje secundario, con más de una línea de contenido.

.contenedor {
  flex-wrap: wrap;
  align-content: flex-end;
}

Alineacion de contenido

• Alineación en el eje secundario, con más de una línea de contenido.

.contenedor {
  flex-wrap: wrap;
  align-content: space-between;
}

Alineacion de contenido

• Alineación en el eje secundario, con más de una línea de contenido.

.contenedor {
  flex-wrap: wrap;
  align-content: space-around; /* stretch por defecto */
}

¿Como funciona?

Cambiar el orden de los elementos

• Podemos cambiar el orden de cada elemento individualmente.

.hongo-malo {
  order: -1;
}
.yoshi {
  order: 1; /* 0 por defecto */
}

¿Como funciona?

• Cambiar la alineación individual de un elemento en el eje secundario.

.mario {
  align-self: flex-start;
}

¿Como funciona?

• Flexbox nos permite alinear elementos dentro del contenedor de manera sencilla

.mario {
  margin: auto;
}

Alineacion individual de elementos

• Podemos cambiar la alineación de un elemento individualmente.

.yoshi {
  margin-left: auto;
}

Alineacion individual de elementos

• Podemos cambiar la alineación de un elemento individualmente.

.yoshi {
  margin-top: auto;
}

Pero...

Compatibilidad con navegadores

Check

mitigar esta situacion

Autoprefix

• Automatizar la escritura de prefijos
• plugin PostCSS

Ayuda manejar Flexbox

Autoprefix

• Configuración de soporte a navegadores mediante browserslist.
• Selecciona a qué navegadores queremos dar soporte desde la web Can I use mediante ciertos valores «verbales»

options.autoprefixer = {
  browsers: ['> 1%', 'ie 8', 'last 2 versions']
};

Ayuda manejar Flexbox

Autoprefix

• Tarea de gulp.

gulp.task('styles:production', ['clean:css'], function() {
return gulp.src(options.sassFiles)
  .pipe($.autoprefixer(options.autoprefixer));
});

Resultado

Autoprefix

a {
  display: flex;
}

a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

Afrontar compatibilidad Navegadores no fancy

• Integrado por defecto en Drupal 8
• Módulo contrib

Modernizr

Drupal 7

• Módulo contrib
• Descargar JavaScript configurado desde modernizr.com y cargarlo mediante .info del theme

Modernizr

Afrontar compatibilidad Navegadores no fancy

Ejemplo modernizr

.no-flexbox .contenedor { display: block; }
.flexbox .box { display: flex; }

if (Modernizr.flexbox) {
  // supported
} else {
  // not-supported
}

Uso en Drupal 7

Theme base Zen

• Versión 7.x-6.0-beta1
• Incluye autoprefix

Consejos vitales

• Liberar nuestra mente == no cerrar posibilidades
• No abusar del "Flexbox para todo"
• Procurar retrocompatibilidad en navegadores
• Checkear lista de bugs / problemas resueltos
• Usar como argumento de venta para forzar el abandono al soporte de navegadores del pasado

Aprender jugando

• Ranitas
• Tanques

Recursos

• Flexbugs
• Flexbox today
• Problemas resueltos

That's all folks

¿Preguntas?

pako@ymbra.com @pakmanlh