css flexbox layout examples

1Display: flex 
2Flex-direction: row | row-reverse | column | column-reverse
3align-self: flex-start | flex-end | center | baseline | stretch
4justify-content: start |  center | space-between | space-around | space-evenly

1.container {
2  flex-flow: column wrap;
3}

1.container {
2  flex-direction: row | row-reverse | column | column-reverse;
3}

1.container {
2  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
3}

1.container {
2  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
3}

1<div class="container">
2  <div class="item"></div>
3  <div class="item"></div>
4  <div class="item"></div>
5  ...
6</div>
7