### Justify Content
Utilities for controlling how flex and grid items are positioned along a container's main axis.
Use justify-content-[Value] with values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch. [For more information on Justify Content, visit MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
```html preview
<sl-flex justify-content-center sl-gap-x="2" flex-wrap>
  <sl-button>1</sl-button>
  <sl-button>2</sl-button>
  <sl-button>3</sl-button>
  <sl-button>4</sl-button>
</sl-flex>
```

### Align Content
Utilities for controlling how rows are positioned in multi-row flex and grid containers.
Use align-content-[Value] with values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch. [For more information on Align Content, visit MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
```html preview
<sl-flex align-content-flex-end sl-gap-x="4" flex-wrap style="width:100px;height: 150px">
  <sl-button>1</sl-button>
  <sl-button>2</sl-button>
  <sl-button>3</sl-button>
  <sl-button>4</sl-button>
</sl-flex>
```

### Align Items
Utilities for controlling how flex and grid items are positioned along a container's cross axis. 
Use align-items-[Value] with values: flex-start, flex-end, center, baseline, stretch. [For more information on Align Items, visit MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
```html preview
<sl-flex justify-content-center align-items-center sl-gap-x="10" flex-wrap style="height: 100px">
  <sl-button sl-basis="1" sl-shrink="8">1</sl-button>
</sl-flex>
```