Basic flexbox

by kmouse

HTML

<div style="resize: both; overflow:hidden; background: #eee">

  <div id="flex">
    <div>Hello</div>
    <div>big world!</div>
    <div>LOOOOOOOOOOOOOOOOOOOOONG</div>
  </div>

</div>

CSS

#flex {
  display: flex;
  border: 2px solid #333;
  flex-wrap: nowrap;
  overflow: hidden;
	align-items: flex-end;
	justify-content: flex-end;
}

#flex>* {
  border: 2px solid #d66;
  background: #fff;
  text-align: center;
  flex: 0 1 auto;
}