SMixinFlex.ts

SMixinFlex.ts

export interface ISMixinFlex {
  direction?: 'row' | 'column';
  justifyContent?:
    | 'normal'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | 'stretch'
    | 'start'
    | 'end'
    | 'flex-start'
    | 'flex-end';
  alignItems?:
    | 'normal'
    | 'stretch'
    | 'center'
    | 'start'
    | 'end'
    | 'self-start'
    | 'self-end'
    | 'flex-start'
    | 'flex-end';
  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
}
export const SMixinFlex = ({
  direction = 'row',
  justifyContent = 'stretch',
  alignItems = 'center',
  flexWrap = 'nowrap',
}: ISMixinFlex = {}) => `
  display: flex;
  flex-wrap: ${flexWrap};
  flex-direction: ${direction};
  justify-content: ${justifyContent};
  align-items: ${alignItems};
`;