Flexbox variable height distribution test 4

flexbox-variable-height-distribution-test-4.markdown

Flexbox variable height distribution test 4

A Pen by Ottobyte on CodePen.

License.

index.html

<div class="flex-wrapper">
  <div class="flex-column">
    <header class="flex-item flex-header"><h1>Flex header</h1></header>
    <div class="flex-item">Flex</div>
    <div class="flex-item">Flex</div>
    <div class="flex-item">Flex</div>
    <div class="flex-item">Flex</div>
    <div class="flex-item">Flex</div>
    <div class="flex-item">Flex</div>
    <div class="flex-item">Flex</div>
    <div class="flex-item flex-last">Flex</div>
    <footer class="flex flex-footer"><h3>Flex footer</h3></footer>
  </div>
  <div class="flex-column">
    <header class="flex-item flex-header"><h1>Flex header</h1></header>
    <div class="flex-item">Flex</div>
    <div class="flex-item flex-last">Flex</div>
    <footer class="flex flex-footer"><h3>Flex footer</h3></footer>
  </div>
</div>

style.scss

.flex-wrapper {
  display: flex;
  width: calc(100% - 20px);
  height: calc(100vh - 40px);
  padding: 20px 10px;
  text-align: center;
}
.flex-column {
  margin: 0 10px;
  flex: 1;
  display: flex;
  flex-flow: column wrap;
}
.flex-item {
  padding: 10px;
  outline: 1px dashed white;
  background: mediumaquamarine;
}
.flex-header {
  background: lightseagreen;
}
.flex-footer {
  background: darkseagreen;
}
.flex-last {
  flex: 1;
}