Emotion CSS Flexbox Mixin

flexbox_mixin.ts

export const flexbox = (options: {
  display?: string;
  direction?: string;
  placeContent?: string;
  placeItems?: string;
  wrap?: string;
  shrink?: string;
  grow?: string;
  alignContent?: string;
  justifyContent?: string;
  alignItems?: string;
  justifyItems?: string;
  gap?: string;
}) => css`
  display: ${options.display || 'flex'};
  flex-direction: ${options.direction || 'row'};

  ${options.placeContent
    ? css`
        place-content: ${options.placeContent};
      `
    : css`
        align-content: ${options.alignContent};
        justify-content: ${options.justifyContent};
      `}

  ${options.placeItems
    ? css`
        place-items: ${options.placeContent};
      `
    : css`
        align-items: ${options.alignItems};
        justify-items: ${options.justifyItems};
      `}

  flex-wrap: ${options.wrap || 'nowrap'};
  flex-shrink: ${options.shrink};
  flex-grow: ${options.grow};
  gap: ${options.gap};
`;

flexbox_mixin_strong.ts

import { Property } from 'csstype';

export const flexbox = (options: {
  display?: Property.Display;
  direction?: Property.FlexDirection;
  placeContent?: Property.PlaceContent;
  placeItems?: Property.PlaceItems;
  wrap?: Property.FlexWrap;
  shrink?: Property.FlexShrink;
  grow?: Property.FlexGrow;
  alignContent?: Property.AlignContent;
  justifyContent?: Property.JustifyContent;
  alignItems?: Property.AlignItems;
  justifyItems?: Property.JustifyItems;
  gap?: Property.Gap;
}) => css`
  display: ${options.display || 'flex'};
  flex-direction: ${options.direction || 'row'};

  ${options.placeContent
    ? css`
        place-content: ${options.placeContent};
      `
    : css`
        align-content: ${options.alignContent};
        justify-content: ${options.justifyContent};
      `}

  ${options.placeItems
    ? css`
        place-items: ${options.placeContent};
      `
    : css`
        align-items: ${options.alignItems};
        justify-items: ${options.justifyItems};
      `}

  flex-wrap: ${options.wrap || 'nowrap'};
  flex-shrink: ${options.shrink};
  flex-grow: ${options.grow};
  gap: ${options.gap};
`;