Playing with Flexbox

by LyndseyB

HTML

<div class="o-flex">
  <div class="o-flex__item">
  Block One
  </div>
  <div class="o-flex__item">
  Block Two
  </div>
  <div class="o-flex__item">
  Block Three
  </div>
  <div class="o-flex__item">
  Block Four
  </div>
</div>

SCSS

$colors: red, yellow, orange, green;

.o-flex {
  background-color: #eee;
  height:200px;
  display: flex;
  flex-direction: row-reverse;  
  //justify-content: space-between;
  //justify-content: center;
  //justify-content: space-around;
  justify-content: flex-end; // justify it far left (because it's reversed)
  //justify-content: flex-start;
  align-items: center; // align on vertical (cross) axis
  //align-items: flex-end; // align to bottom
  //align-items: stretch; // fill height of container
}

.o-flex__item {
  padding: 1rem; 
  margin-right: 10px;
  //width: 50px;
  //height: auto; // can't use specific height with align-items: stretch, must be auto
}

@for $i from 1 through 4 {
  .o-flex__item:nth-child(#{$i}) {
    background-color: nth($colors, $i);
  }
}