Crear una web con CSS 3 Flexbox

Tutoriales

Demo Github

Las Cajas flexibles o FlexBox, es un nuevo modo de maquetar una Web o Aplicación Web. Quizás Años atrás existía esta propiedad pero CSS3 lo llevo a otro nivel. Flexbox es una manera mas sencilla de hacer responsive nuestro diseño mediante bloques, tambien podemos retener estructuras de bloques en linea sin que pierdan su forma. En esta oportunidad les mostrare como crear una pagina web con esta interesante tecnología.

Debemos considerar que:

 

Según la W3C la propiedad Flexbox de CSS3 es soportado por las siguientes versiones de Navegadores:

a

 

Aclarado este punto, podemos proceder con el tutorial, primero voy a crear mi vista html para visualizar el resultado

index.html

Creamos la siguiente estructura:

Ahora creamos las propiedades CSS, las cuales aplicaremos a nuestra vista html:

estilos.css

En los comentarios explico para que sirve cada propiedad flex:

 

Es una manera muy sencilla de hacer adaptable a cualquier dispositivo nuestra Página web, si vamos a trabajar un proyecto entero con Flexbox es mejor usar un Framework ya que hacer todo manualmente nos demandaría mucho tiempo, eso depende de uno. Un buen Framework o marco de trabajo es:
Flexboxgrid.

Espero les sirva de mucho el tutorial.

Gracias por su atención.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required