Flexbox no2: justified content

HTML

<div class="flex-container">
    <div class="square red"></div>
    <div class="square blue"></div>
    <div class="square green"></div>
    <div class="square yellow"></div>
</div>

CSS

.flex-container {
    /* We first create a flex layout context */
    display: flex;
    width : 1000px;
    /* Then we define the flow direction and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
    /* Then we define how is distributed the remaining space */
    justify-content: start;
    background : pink;
    
    padding : 10px;
    
   flex-direction: row;

}
.red { background : red; }
.blue{ background : blue; }
.green { background : green; }
.yellow { background : yellow; }

.square {
    width : 50px;
    height : 100px;
    flex-grow : 0.01;

}