Aprende como crear sitios web flexibles y (responsive) adaptables a dispositivos móviles mediante flexbox CSS3.

Share on Pinterest
Comparte con tus amigos










Enviar

Hace ya unos artículos atrás escribimos una pequeña guiá basica sobre Flexbox, en esta ocasión venimos con una guia completa sobre Flexbox, porque cada vez es mas importante en el diseño web y poco a poco esta siendo implementada en los sitios web.

¿Que es flexbox?

Seguramente te estés preguntando que es Flexbox, si es la primera vez que lo escuchas. Si ya sabes que es puedes saltarte esta parte, pero sino aquí una explicación sobre que es.

Flexbox es un modo de diseño que nos permite crear estructuras para sitios web de una forma mas fácil. Si ya sabes de HTML y CSS probablemente alguna vez habrás visto que los sitios web se realizan utilizando la propiedad float, para desplazar contenedores. Bueno pues con Flexbox ya no necesitaras de usar float para posicionar tus elementos a izquierda a derecha, al contrario, con Flexbox podrás posicionar y distribuir los elementos como tu quieras.

Puedes posicionar un elemento en la posición que desees horizontalmente y por si fuera poco también en forma vertical. Posicionar elementos de forma vertical no es tarea fácil sin Flexbox, incluso muchas veces teníamos que hacer uso de Javascript para hacer cálculos y saber cuanto margen poner a un elemento para centrarlo verticalmente.

No solo puedes posicionar elementos vertical y horizontalmente, sino que puede establecer como se distribuirán, el orden que tendrán e incluso el tamaño que tendrán en proporción a otros elementos. Esto es perfecto para crear diseños adaptables a dispositivos móviles (Responsive Design).

Lo se, todo parece muy loco e incluso hemos mencionado conceptos nuevos, es por eso que hemos hecho esta guía completa en la cual aprenderás que es Flexbox, todas sus propiedades y valores y como utilizarlos.

Guía completa de Flexbox desde 0

La guiá esta en video, es un video largo pero explicamos todo sobre Flexbox, asi que te recomendamos que la veas y muy importante, tomes notas de todo (Aunque abajo tienes una lista de todas las propiedades con los valores posibles).

Recursos mencionados en el video:

Compatibilidad de Flexbox con navegadores web: http://caniuse.com/#search=flexbox

Agregar Prefijos Automáticamente: http://www.falconmasters.com/recursos-herramientas/prefijos-css3-prefix-free/

Como hacer un sitio web / layout responsive con Flexbox CSS3: http://www.falconmasters.com/web-design/sitio-web-layout-flexbox/

Lista de las propiedades Flexbox.

Importante: Las propiedades a continuación no tienen sus prefijos, importante que los agregues, puedes usar Autoprefx-free

Propiedades para el contenedor padre:

Display Flex

Esta propiedad nos permite establecer cual sera el contenedor de los elementos a los que queremos dar un acomodo y/o distribución.

Flex Direction

Nos permite establecer la dirección en la que se acomodaran nuestros elementos.

Flex Wrap

Podemos indicar si todos los elementos estarán en linea con su máximo ancho posible o establecido o si queremos que respete el ancho y los elementos se posicionen en varias lineas de elementos.

Flex Flow

Es un atajo entre flex-direction y flex-wrap.

Justify Content

Nos permite decidir la posición de nuestros elementos y la distribución que tendran.

Align Items

Nos permite posicionar / distribuir elementos verticalmente. (solo para una linea de elementos)

Align Content

Nos permite posicionar / distribuir elementos verticalmente, igual que align-items, solo que align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido un flex-wrap:wrap; y los elementos se posicionan en varias lineas.

 

Propiedades para los elementos hijos:

Flex Basis

Establecemos el tamaño que tendrá un elemento.

Flex Grow

Establecemos la proporción de crecimiento que tendrá un elemento a comparacion con los demás.

Flex Shrink

Establecemos la proporción de encogimiento que tendrá un elemento a comparacion con los demás.

Flex

Atajo entre flex-grow, flex-shrink, flex-basis

Order

Establecemos el orden que tendrá un elemento a comparacion con otros elementos.

Align Self

Nos permite alinear un elemento independientemente de los demás

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Eliezer Pujols

    Tengo que decirlo!
    Excelente aporte, gracias sus aportaciones respecto a Flexbox he logrado hacer cosas increíbles, enserio, mis sitio tiene código mas limpio y no tengo mas limitaciones en el momentos de alinear tanto vertical como horizontalmente. Deberas que Gracias…

    Por cierto haca te dejo el Layout Holy Grail, el cual con Flexbox se puede implementar fácilmente (solo es un ejemplo, para que muchos se animen a utilizar este modulo y ver tu curso), lo implemente gracias a ustedes y otros, claro…

    http://codepen.io/Elienet/full/eNegaO/

    Nota: Por si las dudas, llevo desde marzo estudiando este modulo, no se conformen con lo que leerán aquí, busquen mas… Hay un mundo que explorar.

    • Muchas gracias a ti por ver y leer nuestro contenido, me alegra que te haya servido.

      Muchas gracias por compartir el Layout del Holy Grail, la verdad es que es la base de muchas cosas que se pueden hacer.
      Saludos

  • Karen

    Hola !! Muchísimas gracias por tan gran artículo. Yo ya implementaba flex box, pero confieso que me llevó tiempo y práctica comprender su uso. De todas formas ví este video y pude consolidar mejor mis conocimientos, como siempre es bueno dar un repaso, siempre se termina aprendiendo más.

  • Ric Leal

    Excelente hermano. Muchas gracias.!!!!! :)

  • Víctor Lázaro

    Hola Carlos,

    He estado haciendo algunas pruebas con esto del Flexbox, la verdad es que está muy interesante, ya que el ‘float’ y yo, no nos llevamos muy bien que digamos..

    He creado un pequeño sitio en el que solo aparece un ‘header’ con un título a la izquierda y un menú a la derecha. Ahora viene mi duda.

    Cuando quiero hacerlo ‘Responsive’ a partir de los 768px y que en vez de tener el ‘flex-direction’ en ‘row’ lo tenga en ‘column’ no me funciona, en cambio, si por ejemplo le pongo que cambie de color el ‘background’ si que lo hace. ¿Qué puedo estar haciendo mal?.

    Un saludo, y sigue así, que ayudas a mucha gente como yo.

    • Tu diseño sigue en filas incluso con el mediaquerie?

      No debería ser asi, puede ser que haya un error.

      • Víctor Lázaro

        Si, sigue exactamente igual.

        No te adjunto todo el código aquí que quedaría muy largo el comentario, pero espero que en el vídeo que expliques a hacer el diseño que indicas en el tutorial expliques esto :P

        Un saludo.

  • Luis González Quiroz

    Muy bueno, solo revisa el align-items: pues lo escribiste mal, (aling-items), fuera de eso muy bien, gracias.

  • Pingback: Como hacer un sitio web / layout responsive con Flexbox CSS3()

  • Erick Garza

    Hola Carlos muchas gracias por este gran vídeo enserio que me ahorrara mucho tiempo con el css. Todos tus vídeos son buenos pero este enserio que me ayudara muchisimo GRACIAS!!. ¿ Podrías hacer un vídeo de como hacer un chat ? te lo agradecería demasiado y saludos

  • Carlos Zúñiga

    Excelente, es hora de comenzar a implementarlo y dejar de batallar, apenas lo “probaré” pero de antemano gracias por compartirnos ésta información, Gracias Carlos =]

  • Llevo poco más de un año trabajando con Flexbox a pesar que no es hasta ahora compatible con cualquier navegador y personalmente podria decir que Flexbox es la forma de maquetar páginas de al menos los proximos 10 años; en verdad uno deja de pelear para conseguir ciertos resultados que antes uno tenia que conseguir mediante mañas o de plano pasar por alto y olvidarse del tema.

    Es una guia basica pero sí, bastante completa, buen trabajo.

    Saludos!!

  • Cesar

    Hola! cuando pongo una imagen ¿como le hago para que el texto se ponga a un lado de la imagen? el texto me sale debajo de la imagen.

  • Selin

    Hola, una pregunta que sale un poco del tema, despues de diseñar mi web con tus tutoriales cual seria el siguiente tema que deba tocar para postear cosas como en esta pagina http://www.recreoviral.com te lo consulto por que eres la unica persona que tengo para preguntar que save de esto, de antemano gracias….

  • Tiamat Hathor

    :3 Tu siempre enseñando cosas interezantes.

  • Ocram Lozano

    Más Flexbox porfavor!!!!
    Se puede combinar flexbox con jquery? por ejemplo en una section meter el slide que aquí mismo también enseñaste
    Saludos!

  • Ricardo Javier Vera Lastra

    Gracias por tu explicacion, muy buena.
    Con esto pude crear rapidamente un stickyFooter, pero me queda una duda, y me gustaria saber si uedes explicarla.
    Mi idea es hacer una pagina que sea responsive con todos los elementos internos, la idea es probarla con flexbox, pero al tratar de hacer la estructura principal (body{header, main, footer}, y luego tratar de hacer el main y nav con flex (main{secion#X}) –> (#sPrincipal{nav, slaider}; (nav{ul#li1,ul#li2,ul#li3,ul#li4}, me desordena todo y no se como hacer, además que al cambiar con @media screen va a ser aun ya que ha de cambiar de column wrap a row nowrap algunas cosas.
    Podrias exlicarme como podria hacer esto. adjunto algunas maquetas de mi idea.
    Desde ya , como siempre, muchisimas gracias.

  • Forez Ortiz Jose Rodolfo

    excelente video Carlos… muy bn explicado, me ha ayudado mucho, primero trabajaba con responsive de bootrap pero este metodo excelente, bn bn..

  • Forez Ortiz Jose Rodolfo

    Por cierto uno pregunta ¿ Puedo trabajar flexbox y Bootstrap al mismo tiempo o no ?

  • Nieves Barrena

    Por fin he encontrado alguien que me lo ha explicado muy bien y muy claro!! Muchas gracias

  • Teresa Mendez

    Excelente!!!

  • Pedro Sanchez

    Muy buen video buen amigo!

  • Freddy Alexis Romero

    Gracias me gusta la metodología que usas para transmitir el conocimiento, muchas gracias

  • Joel Castro

    Hola FM, me gustan muchos tus videos. Recomiendas usar siempre esta técnica para la maquetacion de paginas WEB?

  • Rafael Pereyra

    Muchicimas gracias la verdad que con vos ya me he convertido en un nivel intermedio de desarrollo y diseño web

  • Carlos R L Maderos

    Muchas Gracias Carlos Arturo.

  • Gema Moreno

    Hola buenas. Primero dar las gracias a Carlos Arturo por dedicar su tiempo a enseñar sus conocimientos a los demás. Y luego una sugerencia yo al menos gasto mucho tiempo en intentar repetir los ejemplos. ¿No sería más práctico que hubiera un link con los archivos html y css que se necesitan para hacer el ejercicio o que pudiéramos copiarlos con un copia pega de alguna página? Muchas gracias.


Aprende con nuestros cursos

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso
Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso