import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'; import { Box } from '../../index'; import { FlowPropsTable, ExternalReferenceLink, } from '../../../utils/storybook/docs-support'; # Stackee The 'Stackee' mixin allow you to control the relative sizes of elements that are contained in a layout stack using the `grow`, `shrink`, and `basis` properties. ## Grow The `grow` property applies when the parent is bigger than the size of all its children. It specifies how much a stacked element expands relative to its siblings when there is extra space to fill.

Row:

Column:

 ## Basis The `basis` property specifies a default size, in pixels, to use when children don't need to be expanded or shrunk to fit in their parent containers.

Row:

Column:

 ## Shrink The `shrink` property applies when the parent is not big enough to contain the all its children at their 'normal' or 'basis' sizes, and must therefore shink them. It specifies how much a stacked element shrinks relative to its siblings when there is not enough space.

Row:

Column:

 ## Reponsive Stackees All of the above props can also be tailored to different breakpoints, for responsive layouts: 
        
          {`basis={{ md: 100, lg: 200, xl: 500 }}\n`}
          {`grow={{ sm: 1, md: 0 }}`}