Layout flex con doble sidebar lateral, article y sidebar en contenedor de página.
body {
background-color: grey;
}
p {
padding: 0 20px 10px 20px;
}
h1 {
text-align: center;
padding: 0 20px 0 20px;
color: brown;
}
.container {
max-width: 1180px;
margin: 0 auto;
}
.container-flex {
display: flex;
flex-direction: column;
}
.content {
flex: 1 100%;
background-color: white;
}
.side {
flex: 1 100%;
background-color: green;
}
/* Medium screens */
@media screen and (min-width: 600px) {
.container-flex {
flex-direction: row;
}
.container100-flex {
display: flex;
width: 100%;
flex-direction: row;
}
.fill-1 {
flex: 1 1 auto;
background-color: black;
}
.fill-2 {
flex: 1 1 auto;
background-color: yellow;
}
.content {
flex: 1 1 auto;
}
.content-item {
max-width: 920px;
background-color: white;
margin-left: auto;
}
.side {
flex: 1 12 auto;
}
.side-item {
width: 260px;
background-color: green;
}
}
/* Large screens */
@media all and (min-width: 1180px) {
}
(function(t,h,e,l,i,s,R,E,S,A){
t[i]={},t[i][s]=t[i][s]||function (){
if(1===arguments.length){return t[i].a[arguments[0]]||null}
else{t[i].a=t[i].a||[]; t[i].a[arguments[0]] = arguments[1];}
},
R=h.createElement(e),E=h.getElementsByTagName(e)[0]; R.async=1;R.src=l;E.parentNode.insertBefore(R,E)
})(window,document,"script","//ajax.webcamp.fr/v3","thelisresa","ilib");
thelisresa.ilib('camping', 'aucampingdulac&version=2015');
thelisresa.ilib ('language', 'es');
<div class="container"><h1>Bloque superior centrado</h1></div>
<div class="container100-flex">
<div class="fill-1"><h1>Sidebar1</h1></div>
<div class="container-flex">
<div class="content">
<div class="content-item">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed velit augue. Donec non sem ex. Aliquam a enim porttitor, sagittis risus ut, tempus lacus. Aenean mollis orci ac justo tempus, nec ultricies ex elementum. Sed neque dui, feugiatac</p>
</div>
</div>
<div class="side">
<div class="side-item" ilib-favorites></div>
</div>
</div>
<div class="fill-2"><h1>Sidebar2</h1></div>
</div>