> Manuales > Manual de Flexbox CSS

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.

Artículos Descargas
  • 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)