En este manual de Flexbox vamos a tratar con detalle una de las herramientas clave de CSS para poder realizar una maquetación de contenidos detallada y versátil: Flexbox.
Flexbox son un conjunto de nuevos atributos (propiedades) y valores de CSS que podemos aplicar a los elementos de una página y que permiten posicionarlos de maneras diferentes a las disponibles anteriormente. No quiere decir que antes no se pudiera hacer las cosas que hoy Flexbox te permite, sino que para conseguirlas tenías que usar varias técnicas en conjunto y que ahora obtienes de una manera muy sencilla.
En resumen, con flexbox podrás hacer casi inmediatamente cosas que con CSS tradicional son muy difíciles de conseguir, lo que te ahorrará tiempo y dolores de cabeza. Eso sí, requiere un estudio detallado y cambiar la manera de pensar a la hora de realizar las interfaces de usuario o maquetar webs completas.
En el manual de Flexbox podrás aprender qué es este potente estándar y cómo aplicarlo en ejemplos reales del diseño web. Comenzaremos explicando qué es Flexbox, para luego conocer los atributos disponibles, tanto para los contenedores Flex como para los elementos que situamos dentro de un elemento bajo display: flex;. Por último veremos algunos ejemplos útiles sobre aplicaciones que podemos realizar con Flexbox, a modo de práctica, que te permitirán soltarte con este nuevo estándar y encontrar casos de uso donde usarlo.
Flexbox no es difícil de aprender, pero en cambio te proporcionará un sin fin de recursos, gracias a los cuales trabajar con CSS será mucho más divertido y agradecido.
En Manual de Flexbox CSS encuentras:
Artículos del manual
-
Conocimientos generales de CSS FlexBox
FlexBox es un modelo de layout implementado en CSS 3, disponible de manera universal en todos los navegadores actuales. Básicamente nos ofrece nuevas maneras de posicionar elementos en la página, con posibilidades nunca antes existentes en CSS. En los primeros artículos de este manual de Flex Box encontraremos la información básica para aprender este estándar y conocer sus nuevas propiedades y valores diferentes, con los que crear layouts de una manera precisa.
-
1
CSS3 Flexbox
Qué es Flexbox y por qué tienes que comenzar a usar este potente mecanismo de CSS3 para componer layouts de una manera rápida, sencilla y poderosa.
-
2
Entender los conceptos principales de Flexbox
Establecemos algunos conceptos de Flexbox que debes tener en cuenta para trabajar con soltura con este estándar y veremos una primera práctica ilustradora de algunas de sus posibilidades.
-
3
Propiedades para el contenedor Flexbox
Flexbox CSS: propiedades asignables a contenedores con display flex, con explicaciones y ejemplos de uso.
-
4
Propiedades de los ítem flexbox
Veamos las propiedades que puedes poner a los hijos de los contenedores Flexbox para alterar su disposición.
-
Explicaciones prácticas de los atributos FlexBox
En los siguientes artículos vamos a profundizar en los atributos y valores más importantes del modelo FlexBox CSS. Aprenderás de manera detallada las posibilidades de maquetación que nos ofrecen diversos atributos importantes en este modelo, con ejemplos de código CSS que te permitirán entender aún mejor sus características.
-
5
Práctica con justify-content en Flexbox
Veamos un ejemplo práctico de uso de la propiedad justify-content en Flexbox en el que experimentaremos con distintos valores posibles.
-
6
Ejercicios flexbox con align-items
Práctica con la propiedad align-items de los elementos con display flex, una de las principales posibilidades del modelo de maquetación flexbox css.
Descargas
-
Libro electrónico sobre CSS Flexbox El libro electrónico de Flexbox te permite obtener el manual completo de este estándar CSS, con el que podrás aprovechar grandes ventajas del lenguaje para un posicionamiento cómodo de elementos. Puedes descargarlo en PDF y también en libros electrónicos para eReaders convencionales y lectores Kindle.
Archivos disponibles: PDF, ePup, Mobi (Kindle)
Páginas: 43 (Referencia por el archivo PDF)