The [CSS flexbox](https://www.educative.io/answers/what-is-a-css-flexbox) offers powerful alignment options to users. A **flex container** groups multiple flex items together in order to control their representation. 

Among the many properties offered by the flex container, one of the most widely used properties is `justify-content`.

**`space-around`** is a value that can be assigned to the `justify-content` property to display the flex items with spaces before, between, and after the items (shown below):

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flex-items{
  margin: 10px;
}

<html>
 <head>
 </head>
 <body>

<div class="flex-container">
  <button  class="flex-items">Muhammad</button>
  <button  class="flex-items">Hassan</button>
  <button  class="flex-items">Arshad</button>
</div>
 </body>
</html>

codemirror

justify-content: space-around

Flexbox's `justify-content: space-around` aligns items with equal spaces before, between, and after them.