xmartinezpujol
1/1/2017 - 11:49 AM

Layout flex con doble sidebar lateral, article y sidebar en contenedor de página.

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>