Nested flex with full-width header

content: heading with nested flex boxes. image as css background

by jorgeluis

HTML

<div class="flex-container">

  <div class="flex-content">
  
    <h1 class="flex-header">
      flex-header
    </h1>

    <div class="flex-child">
      flex-child
    </div>

    <div class="flex-child">
      flex-child
    </div>

  </div>

 
</div>

SCSS

.flex-container {
  display: flex;
  background-image: url(http://placehold.it/500/f66/fff/?text=.image--right);
  background-repeat: no-repeat;
  background-position: right bottom;
}

.flex-content {
  flex: 0 1 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

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

  .flex-child {
    flex: 1 1;
  }

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


.flex-img--right {
  flex: 1;
  align-self: baseline;
}


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