Aprende como crear sitios web flexibles y (responsive) adaptables a dispositivos móviles con flexbox CSS3
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: https://www.falconmasters.com/recursos-herramientas/prefijos-css3-prefix-free/
Código HTML:
<div class="contenedor"> <header> <div class="logo"> <img src="images/logo.jpg" width="150" alt=""> <a href="#">FalconMasters</a> </div> <nav> <a href="#">Inicio</a> <a href="#">Blog</a> <a href="#">Proyectos</a> <a href="#">Contacto</a> </nav> </header> <section class="main"> <article> <h2 class="titulo">Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article> <h2 class="titulo">Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </section> <aside> <div class="widget"> <div class="imagen"></div> </div> <div class="widget"> <div class="imagen"></div> </div> </aside> <footer> <section class="links"> <a href="#">Inicio</a> <a href="#">Blog</a> <a href="#">Proyectos</a> <a href="#">Contacto</a> </section> <div class="social"> <a href="#">FB</a> <a href="#">TW</a> </div> </footer> </div>
Código CSS del Layout:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contenedor {
background:#ccc;
width:90%;
max-width:1000px;
margin:auto;
/* Flexbox */
display:flex;
flex-flow:row wrap;
}
body {
background:#e9e9e9;
}
header {
background:#2c3e50;
width:100%;
padding:20px;
/* Flexbox */
display: flex;
justify-content:space-between;
align-items:center;
flex-direction:row;
flex-wrap:wrap;
}
header .logo {
color:#fff;
font-size:30px;
}
header .logo img {
width:50px;
vertical-align: top;
}
header .logo a {
color:#fff;
text-decoration: none;
line-height:50px;
}
header nav {
width:50%;
/* Flexbox */
display:flex;
flex-wrap:wrap;
align-items:center;
}
header nav a {
background:#c0392b;
color:#fff;
text-align: center;
text-decoration: none;
padding:10px;
/* Flexbox */
flex-grow:1;
}
header nav a:hover {
background:#e74c3c;
}
.main {
background:#fff;
padding:20px;
flex:1 1 70%;
/*flex:1;*/
}
.main article {
margin-bottom: 20px;
padding-bottom:20px;
border-bottom:1px solid #000;
}
.main article:nth-last-child(1){
margin-bottom: 0;
padding-bottom: 0;
border-bottom:none;
}
aside {
background:#e67e22;
padding:20px;
/*FLEX*/
flex:1 1 30%;
/*flex:0 0 300px;*/
display: flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:flex-start;
}
aside .widget {
background: #d35400;
height:150px;
margin:10px;
}
footer {
background:#2c3e50;
width: 100%;
padding:20px;
/* Flexbox */
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
footer .links {
background:#c0392b;
display:flex;
flex-wrap:wrap;
}
footer .links a {
flex-grow:1;
color:#fff;
padding:10px;
text-align: center;
text-decoration:none;
}
footer .links a:hover {
background:#E74C3C;
}
footer .social {
background:#e67e22;
}
footer .social a {
color:#fff;
text-decoration: none;
padding:10px;
display: inline-block;
}
@media screen and (max-width: 800px) {
.contenedor {
flex-direction:column;
}
header {
flex-direction:column;
padding:0;
}
header .logo {
margin:20px 0;
}
header nav {
width: 100%;
}
aside {
flex-direction:row;
flex:0;
}
aside .widget {
flex-grow:1;
}
}
@media screen and (max-width: 600px) {
aside {
flex-direction:column;
}
footer {
justify-content:space-around;
}
}
[…] Como hacer un sitio web / layout responsive con Flexbox CSS3: https://www.falconmasters.com/web-design/sitio-web-layout-flexbox/ […]
Como se haría el menú si quisieses poner submenus?? Graciass
se puede usar el display flex desde el body?
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»,…..?
Se puede combinar con boostrarp
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/
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.
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.
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
por cierto con tus cursos y tutoriales e logrado crear mi blog aun pequeño pero va en aumento: http://www.tutorialesmanu.blogea.me/
Te ha quedado muy bien amigo, felicidades!!!
Gracias
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!
Pude solucionarlo agregando
@media screen and (max-width: 800px) {
.main {
-webkit-flex:0;
-ms-flex:0;
flex:0;
}
}
Saludos!
Yo no consigo arreglarlo con eso :( Podrías mirarlo por favor -> http://www.pruebanyv.esy.es/
mejor usa normalize, buscalo en el buscador de falconmasters y te aparecerá.
Rodrigo! cómo va? Lo estoy viendo así ahora en ie11.
decis que con normalize lo soluciono?
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
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?
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.
En Chrome tienes que ponerles la coletilla de -webkit y en mozilla -moz para los @media, saludos ;).
Ósea que devo poner -webkit@media porque que todas las etiquetas están usando los prefijos con el prefixer css
Agrega el JS prefix-free para solucionar eso.
Buenas noches quisiera saber que porque cuando sustituyo el tag del titulo por un , siempre permanece abajo de la imagen la unica forma con que lo pude arreglar es colocando el contenedor que tenga un display flex pero quisiera saber porque pasa eso
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.
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?
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.
Vygyg
Creo que no soy el primero en preguntarlo, pero sería intersante saber cómo se elaboran los submenúes con flexbox.
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;
}
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.
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.
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!
Hola, excelente tutorial. ¿Cuál herramienta usas para ver el contenido web en diferentes escalas?
Gracias, saludos.
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».
una pregunta existe medidas standares para los medias queries
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
como hacer cuando cliqueas en la opcion inicio y aparezca alguna informacion
disculpa y como haces para que cuando hagas clic en las etiquetas del la barra de navegación no queden subrayados el texto incluido
con
header nav ul li a{
text-decoration: none;
}
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.
Carlos, Es posible combinar este layout con un header fijo con «position: fixed;»?
Saludos,
Ay una forma de poner el aside a la izquierda?
Es fácil, en este ejemplo en el código CSS en la clase .contenedor se pone flex-flow: row-reverse wrap; de esa forma el aside aparece en la parte izquierda porque el valor de flex-direction es row-reverse. El flex-flow describe en una sola linea el valor de dos valores sin necesidad de escribirlos en dos lineas diferentes el flex-direction y el flex-wrap; ese atajo él lo explico en esta entrada.
https://www.falconmasters.com/css/guia-completa-flexbox/
Gracias Carlos!!
Muy buen video. Se agradece.