csslayoutflexboxflexboxgrid

Setting layout with flexbox

I have a wireframe below and want to see what's the best way to code this with flexbox.

I have coded a simple flexbox grid system but my wireframe requires more customization than what I have on my grid system.

enter image description here

I have parent div has display: flex and have 2 child divs have flex:1 and flex: 0 0 40%. What is the best way to add content div(gray boxes inside on blue and red) that will stay with rest of main wrapper(entire gray box sets to max-width: 1400px)?

Thank you.

Solution

  • Here's the general idea.

    Positioned pseudo-elements, one for each section of the row. With a suitable width (note that the body should have overflow-x:hidden) and appropriate positioning values.

    * {
  box-sizing: border-box;
}
body {
  overflow-x: hidden;
}
.wrapper {
  min-height: 100vh; /* for demo purposes */
  width: 60%;
  margin: auto;
  background: grey;
  display: flex;
  flex-direction: column;
}
header {
  height: 20vh;
  background: green;
}
.inner {
  height: 30vh;
  display: flex;
}
main {
  background: blue;
  flex: 1;
  border: 2px solid black;
}
aside {
  background: red;
  flex: 0 0 40%;
  border: 2px solid black;
}
.other {
  background: pink;
  flex: 1;
}
/* magic section */

.extend {
  position: relative;
}
.extend::after {
  content: '';
  position: absolute;
  width: 100vw;
  top: 0;
  height: 100%;
  background: inherit;
  z-index: -1;
}
.left::after {
  right: 0;
}
.right::after {
  left: 0;
}
    <div class="wrapper">
  <header></header>
  <div class="inner">
    <main class="extend left"></main>
    <aside class="extend right"></aside>
  </div>
  <div class="other"></div>
</div>