<div class="flex">
  FLEX ÖRNEK
  <div class="container">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</div>

<hr />

<div class="inline-flex">
  INLINE FLEX ÖRNEK
  <div class="container">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</div>
/*********** flex */
.flex .container {
  display: flex;
}
.flex .container span {
  background: black;
  color: white;
  margin: 10px 10px 0 0;
  padding: 5px 10px;
}

/*********** inline flex */
.inline-flex .container {
  display: inline-flex;
}
.inline-flex .container span {
  background: #6036c1;
  color: white;
  margin: 10px 10px 0 0;
  padding: 5px 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.