import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Migrations/Flex/Overview" />

# Flex

## Deprecation

There were several discussions about Flex and the concerns of performance/bundle size against the benefits we get from a component like it. The conclusion we came to is:

- Any implementation we come up with will always be an additional layer, with regards to performance and bundle size, compared to just using `make-styles` directly.
- There's little benefit to usability given that the user needs to learn how to use the component's API regardless. If they already have CSS knowledge, then no additional learning is required for using `make-styles`.
- Users are limited to the functionality/property support we end up implementing, forcing them to override it in edge cases.

As such, it was decided to drop this component going forward. To ease migration, below are resources to help you move to other solutions.

## Migration Guide

You will find on the other pages migration guides for both Fabric's Stack component and Northstar's Flex component. For each property provided in the API, there's a counterpart `make-styles` implementation along with a plain CSS implementation for comparison.

Please keep in mind that the property migration guide assumes the `Default State` styles are already being applied, as each component property overrides or adds 1 or more CSS properties on top of the default state.

Also consider this guide does not take into consideration possible overriding of styles in your current component hierarchy. To try and mitigate this, styles that are applied by default by the browser (i.e. `flex-wrap: nowrap`) will still be noted below. If you have no other styles influencing your component, there is no need to apply those specific styles. Please consult [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/) for more information over what are the default CSS values applied by the browsers.

## Other resources

To learn more about how Flexbox layout works, here are some resources you can check on:

- [Extensive documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
- [Great visualization and explanation by CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A Flexbox interactive demo](https://bennettfeely.com/flexplorer/)