Flexbox

by isogunro

HTML

<!--
The flexbox is oriented based on the flex direction.  The flex direction
is based on the layout axis.  If the layout of the flexbox is olumn, the 
layout axis is vertical.  If teh flexbox layout is row, the layout axis 
is horizontal. 
-->
<div id="flexbox1">
  <div>Green</div>
  <div>Red</div>
  <div>Yellow</div>  
</div>

CSS

#flexbox1 {
    display: flex;
    border: 1px dotted black;
    height: 90px;
    margin-top: 100px;
    flex-flow: row-reverse;
    flex-pack:end
}

#flexbox1 > div {
  min-width:80px;
  min-height: 80px;
  border: 1px solid black;
  margin: 5px
}

#flexbox1 > div:nth-child(1) {
  background-color:green;
}

#flexbox1 > div:nth-child(2) {
  background-color:red;
}

#flexbox1 > div:nth-child(3) {
  background-color:yellow;
}