CSS3 y HTML5 con

Flexbox
Descubre la potencia de CSS3 y HTML5 con Flexbox, la herramienta que te
permite crear diseños flexibles y adaptables a cualquier pantalla de manera
sencilla y eficiente. En esta presentación aprenderás cómo aplicar Flexbox
con un ejemplo práctico. ¡Comencemos!

by Carlos Julian Ramos Gonzales

Introducción a CSS3 y HTML5
CSS3
CSS3 es la última versión de
CSS y contiene una gran
cantidad de nuevas funciones
y capacidades para los
diseñadores web.
HTML5
HTML5 introduce nuevas
etiquetas, atributos y
características que ayudan a
los desarrolladores a crear
sitios web más accesibles y
funcionales.
Flexbox
Flexbox es una técnica de
diseño que permite crear
diseños flexibles y
adaptables a diferentes
tamaños de pantalla de
manera sencilla y eficiente.
Un vistazo a Flexbox
¿Qué es Flexbox?
Flexbox es una técnica de diseño
que permite crear diseños
flexibles y adaptables a diferentes
tamaños de pantalla de manera
sencilla y eficiente.
¿Por qué usar Flexbox?
Flexbox hace que sea fácil crear
diseños flexibles, lo que significa
que tu contenido se verá bien en
cualquier dispositivo sin importar
su tamaño o forma.
¿Cómo funciona Flexbox?
Flexbox utiliza contenedores y
elementos flexibles para crear
una estructura flexible que se
adapta a diferentes tamaños de
pantalla.
La estructura básica de Flexbox
1 Contenedor flexible

El contenedor principal que envuelve los

elementos que quieres distribuir.
Elementos flexibles 2
Los elementos que quieres distribuir
dentro del contenedor flexible. 3 Propiedades flexibles

Estas propiedades te permiten ajustar el

diseño del contenedor y los elementos
flexibles.
Practicando con Flexbox: Ejemplo de
construcción de una galería de
imágenes
Ejemplo práctico
Aprende a construir una galería de
imágenes responsiva y adaptable
a diferentes tamaños de pantalla
utilizando Flexbox.
Diseño adaptable
La flexibilidad de los diseños de
Flexbox permite crear sitios web
que se ven bien en una amplia
variedad de dispositivos y
tamaños de pantalla.
Fácil de usar
Flexbox es fácil de usar y requiere
solo unas pocas líneas de código
para comenzar a crear diseños
responsivos y adaptables.
El futuro de Flexbox
1 Creciente adopción 2 Continuo desarrollo

Flexbox se está convirtiendo Flexbox 2.0 está en desarrollo

rápidamente en la técnica de y promete aún más funciones
diseño preferida por muchos y capacidades para los
diseñadores y desarrolladores diseñadores web en el futuro.
web debido a su facilidad de
uso y capacidad para crear
diseños responsivos y
adaptables.

3 Compatibilidad con navegadores

A pesar de que Flexbox tiene una excelente compatibilidad con los

navegadores modernos, algunos navegadores antiguos pueden
presentar problemas de visualización.
Recursos que debes conocer sobre
Flexbox
Guía de Flexbox Ejemplos prácticos

Una guía completa de Flexbox en español que te Echa un vistazo a los ejemplos prácticos de
ayudará a dominar esta técnica de diseño. Flexbox que puedes utilizar como base para tus
propios proyectos.
Conclusión y preguntas
Conclusión Preguntas

Con Flexbox, los diseñadores y desarrolladores
web pueden crear diseños flexibles y
adaptables fácilmente, lo que significa que el
contenido puede verse bien en cualquier
dispositivo.
¿Tienes alguna duda sobre Flexbox o cómo se
utiliza en HTML5 y CSS3? Pregúntanos en el
chat.