# justify-content

> Sets `justify-content`, aliasing the short `between`/`around`/`evenly` forms to their `space-*` CSS keywords.

```ts
import { justify } from "@sdxc/u/layout";
```

Sets `justify-content`, aliasing the short `between`/`around`/`evenly`
forms to their `space-*` CSS keywords.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.justify("between")` | `css({ justifyContent: "space-between" })` |
| `u.justify("center")` | `css({ justifyContent: "center" })` |

## Examples

### Basic example

Use `justify("between")` to spread items along the main axis with equal room between each one:

```tsx
<div mix={[flex(), justify("between"), ...]}>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
</div>
```

### Start, center and end

Use `justify("start")`, `justify("center")` or `justify("end")` to pack items against that part of the main axis:

```tsx
<div mix={[...]}>
	<div mix={[flex(), gap(4), justify("start"), ...]}>
		<div mix={[...]}>start</div>
		<div mix={[...]}>02</div>
	</div>
	<div mix={[flex(), gap(4), justify("center"), ...]}>
		<div mix={[...]}>center</div>
		<div mix={[...]}>02</div>
	</div>
	<div mix={[flex(), gap(4), justify("end"), ...]}>
		<div mix={[...]}>end</div>
		<div mix={[...]}>02</div>
	</div>
</div>
```

### Space around and evenly

Use `justify("around")` to give each item equal room on both sides, or `justify("evenly")` to make every gap the same, the ends included:

```tsx
<div mix={[...]}>
	<div mix={[flex(), justify("around"), ...]}>
		<div mix={[...]}>around</div>
		<div mix={[...]}>02</div>
		<div mix={[...]}>03</div>
	</div>
	<div mix={[flex(), justify("evenly"), ...]}>
		<div mix={[...]}>evenly</div>
		<div mix={[...]}>02</div>
		<div mix={[...]}>03</div>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.justify("between"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.justify("between"))
```

## Signature

```ts
u.justify(value?: JustifyValue)
```