Flex Classic Page Layout

Flex Classic Page Layout.markdown

Flex Classic Page Layout

A Pen by Sebastian Bourges on CodePen.

License.

index.html

body
  .wrapper
    .header header
    .container
      .side side
      .tools tools
      .content content
    .footer footer

style.css

// vars
$total-height: 100vh;
$header-height: 10vh;
$footer-height: 5vh;

body, .wrapper, .header, 
.side, .tools, .content, 
.footer, .container {
  display: flex;
} 
body {
  height: 100vh; // this is the key

  // optional
  background-color: cyan;
}

.wrapper {
  flex: 1 1 100%;
  flex-wrap: wrap;
  
  // optional
  border: 3px dotted red;
}

.header {
  height: $header-height;
  flex: 1 1 100%;
  align-self: flex-start;
  
  // optional
  align-items: center;
  justify-content: center;
  background-color: gray;
}

.footer {
  height: $footer-height;
  flex: 1 1 100%;
  
  // optional
  background-color: gray;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
}

.container {
  flex: 1 1 100%;
  height: $total-height - ($header-height+$footer-height);
  // align-self: stretch;

  // optional
  border: 2px dotted green;
}

.side {
  width: 15em;
  max-width: 15em;
  
  // optional
  // flex: 1 1 30%; 
  background-color: yellow;
}

.tools {
  width: 3em;
  
  // optional
  // flex: 1 1 10%;
  background-color: green;
}
.content {
  flex: 1 1 100%;
  
  // optional
  background-color: purple;
}