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.

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de Flexbox CSS' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

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

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

aloran

05/12/2018
sois un puto fraude
estoy logueado desde hace tiempo, la pagina me reconoce pero no puedo descargar nada y eso que aun no he descargado nada desde vuestra pagina y a cambio no hago mas que recibir porqueria vuestra en mi correo, sois un puto fraude