Flexbox 3spaltig

by marusti

HTML

<div class="flexcontainer">
  <header>Header</header>
  <nav>nav</nav>
  <main>Main</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>

</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flexcontainer > * {
  padding: .625em
}

header {
  background: lightblue
}

nav {
  background: orange
}

aside {
  background: olive
}

main {
  background: lightgreen
}

footer {
  background: tomato
}

@media only screen and (min-width: 768px) {
  .flexcontainer {
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  header {
    flex: 0 0 100%
  }
  aside,
  nav {
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
  }
  main {
    -webkit-flex: 3 0 0;
    flex: 3 0 0;
  }
  footer {
    flex: 0 0 100%
  }
}