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

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

# @fluentui/react-northstar - Flex.Item

## Default state

By default, Flex.Item applies no styles to the items so consider the following render scenario for all props:

<CodeComparison>
  <CodeExample>

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

  </CodeExample>
  <CodeExample>

    ```html
    <div class="flex">
      <div class="flex-item">Item</div>
    </div>
    ```

  </CodeExample>
</CodeComparison>

---

## align

_`center` is used below as an example value_

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      item: {
        alignSelf: 'center',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex-item {
        align-self: center;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

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

---

## className

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

---

## grow

Using it as a `boolean` will result in a `1` value.

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      item: {
        flexGrow: 1,
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex-item {
        flex-grow: 1;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

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

---

## push

`push` will result in a `margin-left: auto` for `row` based layouts and `margin-top: auto` for `column` based layouts.

Example usage for a `column` layout with `push`:

<CodeComparison>
  <CodeExample>

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

  </CodeExample>
  <CodeExample>

    ```css
    .flex {
      flex-direction: column;
    }
    .flex-item {
      margin-top: auto;
    }
    ```

  </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)

---

## shrink

Using it as a `boolean` will result in a `1` value.

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      item: {
        flexShrink: 1,
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex-item {
      flex-shrink: 1;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

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

---

## size

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

<CodeComparison>
  <CodeExample>

    ```js
    makeStyles({
      item: {
        flexBasis: '10px',
      },
    })
    ```

  </CodeExample>
  <CodeExample>

    ```css
    .flex-item {
      flex-basis: 10px;
    }
    ```

  </CodeExample>
</CodeComparison>

MDN documentation:

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

---

## styles

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