Ejemplo (1) Flexbox estructura básica responsive

Vamos a desarrollar un sitio web básico con una estructura desarrollada con Flexbox y adaptable a dispositivos (responsive).

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo (1) Flexbox</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="estilos-dos.css">
</head>
<body>
	<div class="padre">
		<header class="header">header</header>
		<article class="articulo"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet odio facere distinctio consequuntur laudantium quisquam, quasi porro quas, omnis animi unde veniam accusamus repellat, pariatur nesciunt. Optio sunt debitis, distinctio.</p></article>
		<aside class="aside izquierda">izquierda</aside>
		<aside class="aside derecha">derecha</aside>
		<footer class="footer">footer</footer>
	</div>
</body>
</html>

css

.padre{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 text-align: center;
 padding: 10px;
}
.header, .articulo, .izquierda, .derecha, .footer{
 flex-grow:1;
 flex-basis:100%; 
 padding: 10px;
}
@media all and (min-width: 600px){
 .aside{flex: 1 1 auto;}
}
@media all and (min-width: 800px){
 .articulo{flex:2 0;}
 .izquierda{order: 1;}
 .articulo{order: 2;}
 .derecha{order: 3;}
 .footer{order: 4;}
}

.header{background: #581845;}
.articulo{background: #FFC300}
.izquierda{background: #900C3F}
.derecha{background: #C70039}
.footer{background: #DAF7A6}

1 Comment

  1. Hola amigos gracias por el video pero tengo una pregunta como hago para crear al lado derecho 3 columnas que se me visualicen hacia abajo.

Comentarios cerrados.