@mujo/box/dist/styles/flex.js

A React utility to add a style guide to primative components

export var flexStyles = {
  display: {
    flex: {
      display: 'flex'
    },
    block: {
      display: 'block'
    }
  },
  flexDirection: {
    row: {
      flexDirection: 'row'
    },
    column: {
      flexDirection: 'column'
    },
    rowReverse: {
      flexDirection: 'row-reverse'
    },
    columnReverse: {
      flexDirection: 'column-reverse'
    }
  },
  justifyContent: {
    flexStart: {
      justifyContent: 'flexStart'
    },
    flexEnd: {
      justifyContent: 'flexEnd'
    },
    streach: {
      justifyContent: 'streach'
    },
    center: {
      justifyContent: 'center'
    },
    spaceBetween: {
      justifyContent: 'spaceBetween'
    },
    spaceAround: {
      justifyContent: 'spaceAround'
    },
    spaceEvenly: {
      justifyContent: 'spaceEvenly'
    }
  },
  alignItems: {
    flexStart: {
      alignItems: 'flexStart'
    },
    flexEnd: {
      alignItems: 'flexEnd'
    },
    streach: {
      alignItems: 'streach'
    },
    center: {
      alignItems: 'center'
    },
    spaceBetween: {
      alignItems: 'spaceBetween'
    },
    spaceAround: {
      alignItems: 'spaceAround'
    },
    spaceEvenly: {
      alignItems: 'spaceEvenly'
    }
  },
  alignSelf: {
    flexStart: {
      alignSelf: 'flexStart'
    },
    flexEnd: {
      alignSelf: 'flexEnd'
    },
    streach: {
      alignSelf: 'streach'
    },
    center: {
      alignSelf: 'center'
    },
    spaceBetween: {
      alignSelf: 'spaceBetween'
    },
    spaceAround: {
      alignSelf: 'spaceAround'
    },
    spaceEvenly: {
      alignSelf: 'spaceEvenly'
    }
  },
  flex: {
    auto: {
      flex: 'auto'
    },
    0: {
      flex: 0
    },
    1: {
      flex: 1
    },
    2: {
      flex: 2
    },
    3: {
      flex: 3
    },
    4: {
      flex: 4
    },
    5: {
      flex: 5
    },
    6: {
      flex: 6
    },
    7: {
      flex: 7
    },
    8: {
      flex: 8
    },
    9: {
      flex: 9
    },
    10: {
      flex: 10
    }
  },
  flexShrink: {
    0: {
      flexShrink: 0
    },
    1: {
      flexShrink: 1
    },
    2: {
      flexShrink: 2
    },
    3: {
      flexShrink: 3
    },
    4: {
      flexShrink: 4
    },
    5: {
      flexShrink: 5
    },
    6: {
      flexShrink: 6
    },
    7: {
      flexShrink: 7
    },
    8: {
      flexShrink: 8
    },
    9: {
      flexShrink: 9
    },
    10: {
      flexShrink: 10
    }
  },
  flexGrow: {
    0: {
      flexGrow: 0
    },
    1: {
      flexGrow: 1
    },
    2: {
      flexGrow: 2
    },
    3: {
      flexGrow: 3
    },
    4: {
      flexGrow: 4
    },
    5: {
      flexGrow: 5
    },
    6: {
      flexGrow: 6
    },
    7: {
      flexGrow: 7
    },
    8: {
      flexGrow: 8
    },
    9: {
      flexGrow: 9
    },
    10: {
      flexGrow: 10
    }
  },
  flexBasis: {
    0: {
      flexBasis: 0
    },
    1: {
      flexBasis: 1
    },
    2: {
      flexBasis: 2
    },
    3: {
      flexBasis: 3
    },
    4: {
      flexBasis: 4
    },
    5: {
      flexBasis: 5
    },
    6: {
      flexBasis: 6
    },
    7: {
      flexBasis: 7
    },
    8: {
      flexBasis: 8
    },
    9: {
      flexBasis: 9
    },
    10: {
      flexBasis: 10
    }
  },
  flexWrap: {
    wrap: {
      flexWrap: 'wrap'
    },
    nowrap: {
      flexWrap: 'nowrap'
    },
    wrapReverse: {
      flexWrap: 'wrap-reverse'
    }
  }
};