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

Share on Pinterest
Comparte con tus amigos










Enviar

En un articulo pasado ya te mostramos Flexbox y te mostramos una Guía completa de Flexbox desde 0, en esta ocasión vamos a realizar el sitio o layout que mostramos en la guía, si aun no sabes de cual estamos hablando aquí tienes un demo.

Demo del Layout: http://falconmasters.com/demos/layout_flexbox/

Así que comencemos, primero que nada necesitamos una estructura HTML, asi que yo aqui tengo una muy sencilla que consta de un header, un div main donde van a ir los artículos, un aside y un footer. Todos estos elementos irán dentro de un div contenedor, que actuara de padre de los demás para poder darle nuestras propiedades Flexbox.

Como hacer un sitio web / layout responsive con Flexbox CSS3

El código HTML, a continuación no contiene la informacion de nuestro head, por lo que tienes que enlazar tus propios estilos CSS y como recomendación debes añadir el plugin de PrefixFree que te permitirá escribir las propiedades Flexbox sin prefijos.

Tutorial PrefixFree: http://www.falconmasters.com/recursos-herramientas/prefijos-css3-prefix-free/

Código HTML:

 Código CSS del Layout:

 

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Pingback: Guía completa de Flexbox desde 0, diseño web facil y flexible.()

  • Rodrigo Tomé

    Como se haría el menú si quisieses poner submenus?? Graciass

  • se puede usar el display flex desde el body?

  • Naxell

    Buen tutorial….. pero ahora tengo una duda, como haces un sub-menu con solo el elemento “a” ? o espera tendremos que usar “span” o “div”,…..?

  • Lenin Palacios

    Se puede combinar con boostrarp

  • Eliezer Pujols

    Miren el menú que diseñe, es mobile-first (min-width: ;), bueno, no solo es un menú sino también es un layout completo (encojan la ventana de su navegador y verán como se adapta dicho menú).

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

  • Vmpo SS Waffen

    Carlos Arturo, quiero dejarte una foto de mi Safari, ya que en todas las entradas no aparecen tus cifras y creo que tus seguidores son fundamentales para que todos entiendan que hablas con conocimientos y que te sigue una masa importante.
    Gracias siempre por tu valioso tiempo.

  • William Diaz Pabón

    Gracias por este nuevo vídeo, son geniales lo vídeos que haces Carlos Arturo.

    Tengo una duda, como hago si quisiera que el header tanto en pantallas grandes como en pantallas de celulares quede fijo?

    Así como está esta página de falconmasters.com, que la barra superior se mantiene.

  • Hetzell Tellez

    Hola Carlos una pregunta de donde conseguiste la música de fondo que tiene tu intro es que estoy empezando en youtube y quisiera una música de fondo para mi intro como la tuya POR FAVOR responde a mi comentario y por cierto me ENCANTAN tus videos y artículos

    • Hetzell Tellez

      por cierto con tus cursos y tutoriales e logrado crear mi blog aun pequeño pero va en aumento: http://www.tutorialesmanu.blogea.me/

      • Rodrigo Soriano

        Te ha quedado muy bien amigo, felicidades!!!

        • Hetzell Tellez

          Gracias

  • disqus_bvYOumw2Dk

    Hola Carlos, es genial el artículo. Lo he seguido en detalle y veo este inconveniente en Safari (se ve perfecto en Chrome y Firefox). Uso Autoprefix en Sublime. Alguna sugerencia? Desde ya, muchas gracias! Saludos!

    • disqus_bvYOumw2Dk

      Pude solucionarlo agregando

      @media screen and (max-width: 800px) {
      .main {
      -webkit-flex:0;
      -ms-flex:0;
      flex:0;
      }
      }

      Saludos!

    • Rodrigo Soriano

      mejor usa normalize, buscalo en el buscador de falconmasters y te aparecerá.

      • Mariano

        Rodrigo! cómo va? Lo estoy viendo así ahora en ie11.
        decis que con normalize lo soluciono?

        • Tomás

          Como lo has solucionado?
          A mi me pasa lo mismo.
          En firefox y chrome funciona genial lo del flexbox, pero en ie….
          Actualmente estoy usando ie10

  • Sebastian

    Hola, quisiera ayuda en este caso lo que pasa es que fusione el menú apple con el contenido de responsive para hacer una web que contendrá vídeos pero no sale al lado derecho el “aside”, ayuda por favor muchas gracias..

  • Hola Carlos, gracias por compartir tu sabiduría con el resto del mundo.
    Me surge una duda. esta “tecnología” de flexbox, ¿sustitulle los sistemas de regilla de los framework tipo wootstrap?. Es decir, ¿ya no hace falta un css con las regillas o son totalmente compatibles?

  • Alejandro Ramírez

    Hola quisiera saber si alguien me puede ayudar eh echo todo como en el tutorial pero los media queries solo sirve en firefox en chrome no me funciona y en dispositivos móviles tampoco.

    • calypso

      En Chrome tienes que ponerles la coletilla de -webkit y en mozilla -moz para los @media, saludos ;).

      • Alejandro Ramírez

        Ósea que devo poner -webkit@media porque que todas las etiquetas están usando los prefijos con el prefixer css

        • Antonio Toro Quevedo

          Agrega el JS prefix-free para solucionar eso.

  • Manuel Galindez
  • Antonio Toro Quevedo

    Estimado, para el responsive layout es obligatorio poner el tag viewport o basta con hacer las modificaciones según el tamaño del screen…????

    • Si tienes que ponerlo, sino lo pones en un dispositivo movil no funcionara.

  • Antonio

    Seria mejor poner el footer al final del todo siempre para que parezca una mejor web. Lo he intentado poninedo el “align-self: flex-end;” al footer pero no me hace caso. Saber porque?

    • Antonio Toro Quevedo

      Lo mejor para poner el footer siempre abajo con flexbox es poner un contenedor que contenga (valga la redundancia) a todos los elementos (header – main – footer) del sitio, dejarlo con flow-direction: column; y height: 100vh; y al main section ponerle un flex-grow:1 y para que sólo esa parte del layout crezca y abarque todo el alto posible del body. Así se puede hacer el efecto de footer siempre abajo.
      Yo lo hice de esa manera.

  • Anónimo

    Vygyg

  • Milko Alejandro García Torres

    Creo que no soy el primero en preguntarlo, pero sería intersante saber cómo se elaboran los submenúes con flexbox.

    • Yojan Bustamante

      Jajajaja Si Es Verdad Pero Aun Asi Es Muy Sencillo Mira Primero En Los Menus Que Queras Hacer Un Submenu Simplemente Pones Por Ejemplo:

      Menu1

      Submenu1
      Submenu2

      Ok Y Asi Hasta Los Que Quieras Y Para Hacerlo Desplegable En CSS Se Pondrian Estas Otras Lineas

      ul, ol {
      list-style: none;
      }

      .nav > li {

      float:left;

      }

      .nav li a {

      background-color:#000;

      color:#fff;

      text-decoration:none;

      padding:10px 12px;

      display:block;

      }

      .nav li a:hover {

      background-color:#434343;

      }

      .nav li ul {

      display:none;

      position:absolute;

      min-width:140px;

      }

      .nav li:hover > ul {

      display:block;

      }

      .nav li ul li {

      position:relative;

      }

      .nav li ul li ul {

      right:-140px;

      top:0px;

      }

  • José

    Perdón pero no entiendo porque en el css en ninguna utilizas el top y en la mayoría tampoco el height? yo sigo utilizándolas, el problema que tengo que cuando se reduce la pantalla los elementos de un div se alargan y se sobre enciman en el div siguiente y esto se relacional con el top y height, si le pongo más cantidad al top del elemento de abajo al ampliarse el ancho de la pantalla me queda un espacio muy notorio entre ambos divs. Cualquier ayuda me será de mucha utilidad, gracias.

  • yeihtson

    Hola! me serviría de mucho si me ayudaran por favor alguien! estoy creando una pagina web con Flexbox todo va bien! le hice algunas modificaciones pero que no perjudican el código original la cosa es que la pagina se ve bien hasta que llega hasta cierto limite y el aside se ve haci, encima del contenido alguien me podría decir por que? y como soluciono esto?

  • Es increíble que sepas tanto de programación pero tu sitio esta diseñado en wordpress, no seria mejor que tu diseñaras tu sitio desde cero, para que puedas implementar lo que necesites de los distintos lenguajes de programación.

    • Si, solo que desarrollar un sitio web desde 0 lleva mucho tiempo y para lo que necesitaba hacer seria como reinventar la rueda.

      En este caso WP se ajusto a mis necesidades.

  • Nuria Drawyoursmile

    hola, mira tengo que hacer un trabajo suyo, y tengo que hacerlo al revés de como lo hace aquí, es decir, usted lo pasa de modo ordenador a dispositivo movil, a través de las @media, pero yo lo tengo que pasar de tipo movil a ordenador y a tablet, a través de las @media, tambien. Le agradecería que me pudiera solucionar es problema, un saludo y muchas gracias

  • Hola!, muchas gracias por el tutorial, esta excelente! y el tema muy interesante y bien explicado!

  • daniel

    Hola, excelente tutorial. ¿Cuál herramienta usas para ver el contenido web en diferentes escalas?
    Gracias, saludos.

    • Forez Ortiz Jose Rodolfo

      si no me equivoco es con el navegador firefox, inspeccionas elementos y te diriges a la opción en la parte superior derecha del “inspector” — valga la redundancia … tercer icono de izquierda a derecha, “vista de diseño adaptable”.

  • Marciley Francisco de Jesus

    una pregunta existe medidas standares para los medias queries

    • Carlos Ignacio

      si, pero es super mala practica, puesto que tu web no se tiene que ver bien segun medidas standar se tiene que ver bien siempre

  • jose jair chapoñan sandoval

    como hacer cuando cliqueas en la opcion inicio y aparezca alguna informacion

  • Feer E. Aisama

    disculpa y como haces para que cuando hagas clic en las etiquetas del la barra de navegación no queden subrayados el texto incluido

    • Christian Lòpez Camacho

      con
      header nav ul li a{
      text-decoration: none;

      }

  • Orlando

    Saludos Carlos, muchas gracias por el aporte, muy bien explicado.
    Ahora tengo una pregunta, como hacer que el footer quede hasta abajo y contenido ocupe lo que sobra del footer y del header.

  • Julio Anaya

    Carlos, Es posible combinar este layout con un header fijo con “position: fixed;”?

    Saludos,


Aprende con nuestros cursos

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
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso