import Layout from '../../lib/components/Layout';
export default Layout;

# flip

The `flip{:.function}` middleware changes the placement of the
floating element to the opposite one by default in order to keep
it in view.

<div className="flex flex-col gap-4">
  <Chrome center scrollable className="h-96">
    <Floating middleware={[{name: 'flip'}]}>
      <div className="grid place-items-center text-gray-50 w-32 h-32 bg-blue-600">
        Scroll
      </div>
    </Floating>
  </Chrome>
</div>

It also has the ability to flip to _any_ placement, not just the
opposite one.

## Usage

```js
import {computePosition, flip} from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  middleware: [flip()],
});
```

> This cannot be used with `autoPlacement{:.function}`.

## Options

```ts
type Options = DetectOverflowOptions & {
  mainAxis: boolean;
  crossAxis: boolean;
  fallbackPlacements: Array<Placement>;
  fallbackStrategy: 'bestFit' | 'initialPlacement';
  flipAlignment: boolean;
};
```

### mainAxis

This is the main axis in which overflow is checked to perform a
flip.

- `y`-axis for `'top'{:js}` and `'bottom'{:js}` placements
- `x`-axis for `'left'{:js}` and `'right'{:js}` placements

```js
flip({mainAxis: false}); // true by default
```

### crossAxis

This is the cross axis in which overflow is checked to perform a
flip, the opposite axis of `mainAxis{:.objectKey}`.

```js
flip({crossAxis: false}); // true by default
```

### fallbackPlacements

This describes the array of placements to try if the preferred
`placement{:.objectKey}` doesn't fully fit on the axes in which
overflow is checked (both by default).

```js
flip({
  fallbackPlacements: ['right', 'bottom'],
});
```

If the `placement{:.objectKey}` in `computePosition(){:js}` is
set to `'top'{:js}`, but that doesn't fit, then `'right'{:js}`
will be used instead. If `'right'{:js}` also doesn't fit, then
`'bottom'{:js}` will be used. If none of these fit, then the
best-fitting placement will be used.

### fallbackStrategy

When no placements fit, then you'll want to decide what happens.
`'bestFit'{:js}` will use the placement which fits best on the
checked axes. `'initialPlacement'{:js}` will use the initial
`placement{:.objectKey}` specified.

```js
flip({
  fallbackStrategy: 'initialPlacement', // 'bestFit' by default
});
```

### flipAlignment

When an alignment is specified, e.g. `'top-start'{:js}` instead
of just `'top'{:js}`, this will flip to `'top-end'{:js}` if
`start` doesn't fit.

```js
flip({flipAlignment: false}); // true by default
```

When using this with the `shift{:.function}` middleware, ensure
`flip{:.function}` is placed **before** `shift{:.function}` in
your middleware array. This ensures the
`flipAlignment{:.objectKey}` logic can act before shift's does.

### ...detectOverflowOptions

All of [detectOverflow](/docs/detectOverflow#options)'s options
can be passed. For instance:

```js
flip({padding: 5}); // 0 by default
```
