# flex-shrink

> Applies `flex-shrink`.

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

Applies `flex-shrink`. Defaults to `0`, the common case of a fixed-size
flex item — an icon or graphic slot — that keeps its size alongside the
flexible content next to it.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.shrink()` | `css({ flexShrink: "0" })` |
| `u.shrink(1)` | `css({ flexShrink: "1" })` |

## Examples

### Basic example

Use `shrink()` to keep a flex item at its size when the row runs out of room, so its siblings shrink instead:

```tsx
<div mix={[flex(), gap(4), is("full")]}>
	<div mix={[shrink(), basis(36), ...]}>shrink()</div>
	<div mix={[basis(96), ...]}>shrinks</div>
	<div mix={[shrink(), basis(36), ...]}>shrink()</div>
</div>
```

### Shrinking in proportion

Pass a factor like `shrink(2)` to shrink items in proportion to each other when they overflow the row:

```tsx
<div mix={[flex(), gap(4), is("full")]}>
	<div mix={[shrink(1), basis(64), ...]}>shrink(1)</div>
	<div mix={[shrink(2), basis(64), ...]}>shrink(2)</div>
	<div mix={[shrink(1), basis(64), ...]}>shrink(1)</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.shrink())
```

## Responsive design

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

```ts
u.at("md", u.shrink())
```

## Signature

```ts
u.shrink(value?: number | (string & {}))
```