Flexible Box Quick notes

Keep this in mind when using CSS flexbox

CSS

.i_am_a_flexbox{
  display:flex; /* All the direct children of this element become flex items*/
  flex-wrap:wrap; /* If the children occupy more space available in the main axis (left to right), then they should wrap to the next line */
  margin:2em;
  background: #000;
  padding:2em;
}

.i_am_a_flexbox div{ /* This is not advised. */

}

.each_child{
  background-color:#eee;
  margin:1px;
  padding:0;
  flex: auto; /* The chilren will occupy an equal width */
  text-align: center;
}

flex-basis

flex-basis: is the width of the flex item.

flex-basis: 100px;      
flex-basis: auto; // This will divide each item into equal rows