Flex header

by Daniel Beff

HTML

<header>
  <div class="left">Left</div>
  <div class="right">Right</div>
</header>
<header>
  <div class="left">Left</div>
  <div class="right">Right</div>
</header>
<header>
  <div class="left">Left</div>
  <div class="right">Right</div>
</header>

SCSS

header {
  background: SlateGrey;
  color: white;
  font-family: Arial;
  padding: 10px;
  margin: 10px 0;
}


/* WITH FLEXBOX - Best aproach */
header:nth-child(1) {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}


/* WITH FLOAT */
/* GOOD but need to much code! */
header:nth-child(2) {
  /* clearfix */
  &:before,
  &:after {
    display: table;
    content: " ";
    clear: both;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}

/* WITH POSITION (NOT GOOD!) */
/* The container (header) cannot know about the height of your childrens */
/* and became smaller */
header:nth-child(3) {
  position: relative;
  .left {position:absolute;left: 0}
  .right {position:absolute;right: 0}
}