Comment supprimer les espaces entre les éléments de niveau inline avec la valeur flex de la propriété display?

Source Code: (back to article)

<!DOCTYPE html> out it
<html>
  <head>
    <style>
      div {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
      }
      strong {
        display: inline-block;
        width: 150px;
        font-size: 20px;
        padding: 20px;
        color: #eeeeee;
        text-align: center;
      }
      strong:nth-child(1) {
        background: #1c87c9;
      }
      strong:nth-child(2) {
        background: #666666;
      }
      strong:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de comment supprimer l'espace entre les éléments de niveau inline</h2>
    <div>
      <strong>Élément 1</strong>
      <strong>Élément 2</strong>
      <strong>Élément 3</strong>
    </div>
  </body>
</html>