Flexbox in CSS

Libro breve de Estelle Weyl dedicado por completo al módulo de diseño de caja flexible de CSS (Flexbox), en su especificación ya estable en 2017. Está dirigido a maquetadores y desarrolladores front-end que conocen CSS y están cansados de construir layouts a base de floats, clears y rellenos; aunque el catálogo lo marca como básico, O'Reilly lo sitúa entre intermedio y avanzado por la profundidad con la que trata cada propiedad.

Está organizado en cuatro capítulos: una introducción a Flexbox, el contenedor flexible y los elementos flexibles, y un capítulo final de ejemplos. En el contenedor se estudian display: flex e inline-flex, flex-direction, flex-wrap, flex-flow y las propiedades de alineación justify-content, align-items y align-content. En los elementos se explican flex-grow, flex-shrink, flex-basis y el atajo flex, align-self y order, con atención al cálculo de cómo se reparte el espacio sobrante o faltante, que es donde suele fallar la intuición.

No es un libro de proyectos: el capítulo de ejemplos muestra patrones habituales de interfaz resueltos con Flexbox (barras de navegación, alineaciones, componentes tipo tarjeta, diseños adaptables). Su gran aporte es el detalle con que explica el algoritmo de flexibilidad, apoyado en muchos diagramas. Deja fuera CSS Grid, que hoy se usa junto con Flexbox para el layout de página, así que conviene leerlo junto con un texto sobre Grid. Hace falta dominar el modelo de caja y los selectores antes de empezar.