Flex layout with full-width header

by jorgeluis

HTML

<div class="container">
  <div class="flex-header">
    flex-header
  </div>
  <div class="flex-child">
    Child
  </div>
  <div class="flex-child">
    Child
  </div>
  <div class="flex-child">
    Child
  </div>
  <div class="flex-child">
    Child
  </div>  
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.flex-header {
  flex: 1 0 100%;
}

.flex-child {
  flex: 1;
  margin-top: 1em;
}

.flex-child + .flex-child {
  margin-left: 1em;
}

/* General styling */
div {
  background: rgba(200, 200, 200, 0.5);
  padding: 2em;
  box-sizing: border-box;
}