Skip to content


flip() changes the placement of the floating element to the opposite one by default in order to keep it in view.

Scroll the container

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


import {computePosition, flip} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [flip()],

This cannot be used with autoPlacement().


These are the options you can pass to flip().

interface Options extends DetectOverflowOptions {
  mainAxis?: boolean;
  crossAxis?: boolean;
  fallbackPlacements?: Array<Placement>;
  fallbackStrategy?: 'bestFit' | 'initialPlacement';
  flipAlignment?: boolean;


default: true

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

  • y-axis for 'top' and 'bottom' placements
  • x-axis for 'left' and 'right' placements
flip({mainAxis: false});


default: true

This is the cross axis in which overflow is checked to perform a flip, the opposite axis of mainAxis.

flip({crossAxis: false});


default: [oppositePlacement]

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

  fallbackPlacements: ['right', 'bottom'],

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


default: 'bestFit'

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

  fallbackStrategy: 'initialPlacement',


default: true

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

flip({flipAlignment: false});

When using this with the shift() middleware, ensure flip() is placed before shift() in your middleware array. This ensures the flipAlignment logic can act before shift's does.


All of detectOverflow's options can be passed. For instance:

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