EL CÓDIGO▼

.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;
	}
}

</style>

<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>

<footer>
			<section class="links">
				<a href="#">Inicio</a>
				<a href="#">Blog</a>
				<a href="#">Proyectos</a>
				<a href="#">Contacto</a>
			</section>

Falconmasters.com/

CÓDIGO todo CÓDIGO

Páginas

ARTÍCULOS POR CATEGORIAS▼

Ejemplo de FLEXBOX

EL CÓDIGO▼

Dejas tus dudas :

CÓDIGO todo CÓDIGO