.cluster {
  /* Set the Flexbox context */
  display: flex;

  /* Enable wrapping */
  flex-wrap: wrap;

  /* Set the space/gap */
  gap: var(--space, 1rem);

  /* Choose your justification (flex-start is default) */
  justify-content: center;

  /* Choose your alignment (flex-start is default) */
  align-items: center;
}

<ul class="cluster">
  <li><!-- child --></li>
  <li><!-- child --></li>
  <li><!-- etc --></li>
</ul>

Cluster components suit any groups of elements that differ in length and are liable to wrap. Buttons that appear together at the end of forms are ideal candidates, as well as lists of tags, keywords, or other meta information. Use the to align any groups of horizontally laid out elements to the left or right, or in the center.

In a classic header bar you might have the logo on the left and then a cluster of links on the right.

Since a cluster represents a group of similar items, they should pretty much always be marked up as a list.