.flex-container {

  /* We first create a flex layout context */

  display: flex;


  /* 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;


  flex-flow: row wrap;


  /* Then we define how is distributed the remaining space */

  justify-content: space-around;


  padding: 0;

  margin: 0;

  list-style: none;
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter