flexbox rows

by kpowz

HTML

<div class="flex-container">
  <div class="flex-row">
    row one
  </div>
  <div class="flex-row">
    row two 
  </div>
  <div class="flex-row flex-half-row">
    half row 1 
  </div>
  <div class="flex-row flex-half-row">
    half row 2 
  </div>
  <div  class="flex-row">
    row three
  </div>
</div>

CSS

.flex-container {
  display: flex;
  flex-flow: row wrap;
  margin: 1rem;
}

.flex-container > * {
  flex: 1 100%;
}

.flex-row {
  background-color: green;
  color: white;
  border: 1px solid black;
  margin: .33rem;
  border-radius: 3px;
  padding: .33rem;
}

.flex-half-row {
  flex: 1 auto;
}