Flexbox 2 Spaltig

nur main toogle

by marusti

HTML

<div class="flexcontainer">

  <div class="top-bar">

    <label for="off-canvas">Menü</label>
  </div>
  <header>Header</header>
  <div class="top-menu">
    top menü
  </div>
  <div class="wrapper">
    <input id="off-canvas" type="checkbox" unchecked/>
    <aside>
      aside
    </aside>
    <main>
      main
    </main>
  </div>

  <footer>footer</footer>
</div>

CSS

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }
    
    .flexcontainer {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }
    
    .flexcontainer > * {
      padding: 1em;
      background: #fff;
      border: 2px solid #eee
    }
    
    .wrapper {
      display: flex
    }
    
    .top-bar,
    header,
    .top-menu,
    .wrapper,
    footer {
      flex: 1 100%
    }
    
    aside {
      flex: 0 0 12em;
      transition: margin 0.3s ease
    }
    
    main {
      flex: 1;
    }
    /* Checkbox hack to toggle nav visibility */
    
    input#off-canvas {
      display: none
    }
    
    input ~ aside {
      margin-left: -12em;
    }
    
    input:checked ~ aside {
      margin-left: 0;
    }
    
    @media only screen and (min-width: 768px) {
      .top-bar {
        display: none
      }
      input ~ aside {
        margin-left: 0;
      }
      aside {
        -webkit-flex: 1 0 0;
        flex: 1 0 0;
      }
      main {
        -webkit-flex: 3 0 0;
        flex: 3 0 0;
      }
    }