import { Meta } from '@storybook/addon-docs/blocks';
import { CodeComparison, CodeExample } from './utils';

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

# @fluentui/react-northstar - Flex

## Default state

For Northstar's Flex, the following layout is what's required to have a no property implementation:

<CodeComparison>
  <CodeExample title="Render">

```jsx
<div className={styles.root}>{children}</div>
```

  </CodeExample>
  <CodeExample title="make-styles">

    ```js
    makeStyles({
      root: {
        display: 'flex',
      },
    })
    ```

  </CodeExample>
</CodeComparison>

<CodeComparison>
  <CodeExample>

    ```html
    <div class="flex">
      ...
    </div>
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
      display: flex;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)

---

## as

The `as` property strictly replaces which element type will be rendered as the root node. The default value for this is `div`.

---

## className

This is just an override to apply the class name to the rendered node.

---

## column

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        flexDirection: 'column',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
      flex-direction: column;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)

---

## debug

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        border: '1px dotted grey',
        background: 'lightgrey',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
      border: 1px dotted grey;
      background: lightgrey;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
- [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)

---

## fill

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        width: '100%',
        height: '100%',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
      width: 100%;
      height: 100%;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
- [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height)

---

## gap

`gap` is applied to either `margin-bottom`, for `column` layouts, or `margin-right`, for default (`row`) layouts.
Below is a table with the rem values corresponding to the different existing gaps.

| gap         | value     |
| ----------- | --------- |
| gap.smaller | 0.5rem    |
| gap.small   | 0.625rem  |
| gap.medium  | 0.9375rem |
| gap.large   | 1.875rem  |

Example usage for a `column` layout with `gap.smaller`:

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        display: 'flex',
        flexDirection: 'column',
        '> :not(:last-child)': {
          marginBottom: '0.5rem',
        }
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
      display: flex;
      flex-direction: column;
    }
    .flex > :not(:last-child) {
      margin-bottom: 0.5rem;
    }
    ```

  </CodeExample>
</CodeComparison>

As an alternative to this implementation, you can also use the CSS `gap` property. However, keep in mind that this is not the implementation in Flex, given that CSS `gap` is not supported by Internet Explorer 11, and might produce different results.
If you do not have this limitation, you can use the following CSS:

_`10px` is used below as an example value_

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
- [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
- [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)

---

## hAlign/vAlign

hAlign/vAlign change which properties they affect depending on your `flex-direction`.
Here is a table you can follow for which property to use for alignment:

| Direction | `flex-direction` | Horizontal alignment | Vertical alignment |
| --------- | ---------------- | -------------------- | ------------------ |
| default   | row              | justify-content      | align-items        |
| column    | column           | align-items          | justify-content    |

You can also refer to [this MDN page](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) for a great in depth explanation about how alignment works in flexbox.

MDN documentation:

- [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
- [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
- [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)

---

## inline

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        display: 'inline-flex',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
        display: inline-flex;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display#legacy)

---

## padding

_`10px` is used below as an example value_

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        padding: '10px',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
        padding: 10px;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)

---

## space

`space` will override the `justify-content` CSS prop, set before by `hAlign`/`vAlign`. The three allowed values translate into the following CSS values:

| `space` value | `justify-content` value |
| ------------- | ----------------------- |
| around        | space-around            |
| between       | space-between           |
| evenly        | space-evenly            |

_`space-between` is used below as an example value_

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        justifyContent: 'space-between',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
        justify-content: space-between;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

---

## styles

Override to apply the different styles to the rendered node. Refrain from using this for `make-styles` implementations and use `make-styles` directly.

---

## wrap

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      root: {
        flexWrap: 'wrap',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
        flex-wrap: wrap;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

- [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)