diff --git a/playbook/app/pb_kits/playbook/_playbook.scss b/playbook/app/pb_kits/playbook/_playbook.scss
index 3109e810dd..32ef203f15 100755
--- a/playbook/app/pb_kits/playbook/_playbook.scss
+++ b/playbook/app/pb_kits/playbook/_playbook.scss
@@ -92,6 +92,7 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import './utilities/mixins';
 @import './utilities/spacing';
 @import './utilities/cursor';
 @import './utilities/max_width';
diff --git a/playbook/app/pb_kits/playbook/utilities/_align_content.scss b/playbook/app/pb_kits/playbook/utilities/_align_content.scss
index a8f93fc995..a1d60b6abb 100644
--- a/playbook/app/pb_kits/playbook/utilities/_align_content.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_align_content.scss
@@ -1,29 +1,10 @@
-.align_content_start {
-  display: flex;
-  align-content: start !important;
-}
-
-.align_content_end {
-  display: flex;
-  align-content: end !important;
-}
-
-.align_content_center {
-  display: flex;
-  align-content: center !important;
-}
-
-.align_content_space_between {
-  display: flex;
-  align-content: space-between !important;
-}
-
-.align_content_space_around {
-  display: flex;
-  align-content: space-around !important;
-}
-
-.align_content_space_evenly {
-  display: flex;
-  align-content: space-evenly !important;
-}
\ No newline at end of file
+$align_content_values: (
+  start: start,
+  end: end,
+  center: center,
+  space_between: space-between,
+  space_around: space-around,
+  space_evenly: space-evenly
+);
+
+@include global_props_responsive_css($align_content_values, 'align_content', 'align-content');
diff --git a/playbook/app/pb_kits/playbook/utilities/_align_items.scss b/playbook/app/pb_kits/playbook/utilities/_align_items.scss
index 1aae9e285b..614863e0af 100644
--- a/playbook/app/pb_kits/playbook/utilities/_align_items.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_align_items.scss
@@ -1,35 +1,11 @@
-.align_items_flex_start {
-  display: flex;
-  align-items: flex-start !important;
-}
-
-.align_items_flex_end {
-  display: flex;
-  align-items: flex-end !important;
-}
-
-.align_items_start {
-  display: flex;
-  align-items: start !important;
-}
-
-.align_items_end {
-  display: flex;
-  align-items: end !important;
-}
-
-
-.align_items_center {
-  display: flex;
-  align-items: center !important;
-}
-
-.align_items_baseline {
-  display: flex;
-  align-items: baseline !important;
-}
-
-.align_items_stretch {
-  display: flex;
-  align-items: stretch !important;
-}
\ No newline at end of file
+$align_items_values: (
+  flex_start: flex-start,
+  flex_end: flex-end,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_items_values, 'align_items', 'align-items');
diff --git a/playbook/app/pb_kits/playbook/utilities/_align_self.scss b/playbook/app/pb_kits/playbook/utilities/_align_self.scss
index 882c4a53ab..dd89b183ab 100644
--- a/playbook/app/pb_kits/playbook/utilities/_align_self.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_align_self.scss
@@ -1,29 +1,10 @@
-.align_self_start {
-  display: flex;
-  align-self: start !important;
-}
-
-.align_self_end {
-  display: flex;
-  align-self: end !important;
-}
-
-.align_self_auto {
-  display: flex;
-  align-self: auto !important;
-}
-
-.align_self_center {
-  display: flex;
-  align-self: center !important;
-}
-
-.align_self_stretch {
-  display: flex;
-  align-self: stretch !important;
-}
-
-.align_self_baseline {
-  display: flex;
-  align-self: baseline !important;
-}
\ No newline at end of file
+$align_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_self_values, 'align_self', 'align-self');
diff --git a/playbook/app/pb_kits/playbook/utilities/_flex.scss b/playbook/app/pb_kits/playbook/utilities/_flex.scss
index 35ad34a8ad..a04232e079 100644
--- a/playbook/app/pb_kits/playbook/utilities/_flex.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_flex.scss
@@ -1,15 +1,20 @@
-.flex_auto {
-  flex: auto !important;
-}
+$flex_values: (
+  auto: auto,
+  initial: initial,
+  none: none,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
 
-.flex_initial {
-  flex: initial !important;
-}
-
-.flex_none {
-  flex: none !important;
-}
-
-.flex_1 {
-  flex: 1 !important;
-}
\ No newline at end of file
+@include global_props_responsive_css($flex_values, 'flex', 'flex');
diff --git a/playbook/app/pb_kits/playbook/utilities/_flex_direction.scss b/playbook/app/pb_kits/playbook/utilities/_flex_direction.scss
index c7f76250ef..60a523b9e9 100644
--- a/playbook/app/pb_kits/playbook/utilities/_flex_direction.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_flex_direction.scss
@@ -5,24 +5,4 @@ $flex_direction_values: (
   column_reverse: column-reverse
 );
 
-@include break_at(breakpoint("lg")) {
-  .test {
-    display: none;
-  }
-}
-
-@each $flex-direction, $flex-direction-value in $flex_direction_values {
-  .flex_direction_#{$flex-direction} {
-    display: flex;
-    flex-direction: #{$flex-direction-value} !important;
-  }
-}
-
-@each $flex-direction, $flex-direction-value in $flex_direction_values {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    .flex_direction_#{$breakpoint}_#{$flex-direction} {
-      display: flex;
-      flex-direction: #{$flex-direction-value} !important;
-    }
-  }
-}
+@include global_props_responsive_css($flex_direction_values, 'flex_direction', 'flex-direction');
diff --git a/playbook/app/pb_kits/playbook/utilities/_flex_grow.scss b/playbook/app/pb_kits/playbook/utilities/_flex_grow.scss
index f048649a7b..f871384063 100644
--- a/playbook/app/pb_kits/playbook/utilities/_flex_grow.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_flex_grow.scss
@@ -1,9 +1,6 @@
-.flex_grow_1 {
-  display: flex;
-  flex-grow: 1 !important;
-}
+$flex_grow_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_grow_0 {
-  display: flex;
-  flex-grow: 0 !important;
-}
\ No newline at end of file
+@include global_props_responsive_css($flex_grow_values, 'flex_grow', 'flex-grow');
diff --git a/playbook/app/pb_kits/playbook/utilities/_flex_shrink.scss b/playbook/app/pb_kits/playbook/utilities/_flex_shrink.scss
index 7cefb10f05..af4565fbe0 100644
--- a/playbook/app/pb_kits/playbook/utilities/_flex_shrink.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_flex_shrink.scss
@@ -1,9 +1,6 @@
-.flex_shrink_1 {
-  display: flex;
-  flex-shrink: 1 !important;
-}
+$flex_shrink_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_shrink_0 {
-  display: flex;
-  flex-shrink: 0 !important;
-}
\ No newline at end of file
+@include global_props_responsive_css($flex_shrink_values, 'flex_shrink', 'flex-shrink');
diff --git a/playbook/app/pb_kits/playbook/utilities/_flex_wrap.scss b/playbook/app/pb_kits/playbook/utilities/_flex_wrap.scss
index 32a1a0948f..3815ce6705 100644
--- a/playbook/app/pb_kits/playbook/utilities/_flex_wrap.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_flex_wrap.scss
@@ -1,14 +1,7 @@
-.flex_wrap_wrap {
-  display: flex;
-  flex-wrap: wrap !important;
-}
+$flex_wrap_values: (
+  wrap: wrap,
+  nowrap: nowrap,
+  wrap_reverse: wrap-reverse,
+);
 
-.flex_wrap_nowrap {
-  display: flex;
-  flex-wrap: nowrap !important;
-}
-
-.flex_wrap_wrap_reverse {
-  display: flex;
-  flex-wrap: wrap-reverse !important;
-}
+@include global_props_responsive_css($flex_wrap_values, 'flex_wrap', 'flex-wrap');
diff --git a/playbook/app/pb_kits/playbook/utilities/_justify_content.scss b/playbook/app/pb_kits/playbook/utilities/_justify_content.scss
index 2925e7a602..40584a5e0a 100644
--- a/playbook/app/pb_kits/playbook/utilities/_justify_content.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_justify_content.scss
@@ -1,23 +1,10 @@
-.justify_content_start {
-  justify-content: start !important;
-}
-
-.justify_content_end {
-  justify-content: end !important;
-}
-
-.justify_content_center {
-  justify-content: center !important;
-}
-
-.justify_content_space_between {
-  justify-content: space-between !important;
-}
-
-.justify_content_space_around {
-  justify-content: space-around !important;
-}
-
-.justify_content_space_evenly {
-  justify-content: space-evenly !important;
-}
+$justify_content_values: (
+  start: start,
+  center: center,
+  end: end,
+  space_around: space-around,
+  space_between: space-between,
+  space_evenly: space-evenly,
+);
+
+@include global_props_responsive_css($justify_content_values, 'justify_content', 'justify-content');
diff --git a/playbook/app/pb_kits/playbook/utilities/_justify_self.scss b/playbook/app/pb_kits/playbook/utilities/_justify_self.scss
index 0a7c78abee..f48ce857b3 100644
--- a/playbook/app/pb_kits/playbook/utilities/_justify_self.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_justify_self.scss
@@ -1,19 +1,9 @@
-.justify_self_auto {
-  justify-self: auto !important;
-}
-
-.justify_self_start {
-  justify-self: start !important;
-}
-
-.justify_self_end {
-  justify-self: end !important;
-}
-
-.justify_self_center {
-  justify-self: center !important;
-}
-
-.justify_self_stretch {
-  justify-self: stretch !important;
-}
+$justify_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($justify_self_values, 'justify_self', 'justify-self');
diff --git a/playbook/app/pb_kits/playbook/utilities/_mixins.scss b/playbook/app/pb_kits/playbook/utilities/_mixins.scss
new file mode 100644
index 0000000000..394bc2487c
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/_mixins.scss
@@ -0,0 +1,26 @@
+@mixin global_props_css($props, $class_prefix, $css_attribute, $responsive) {
+  @each $propkey, $propvalue in $props {
+    .#{$class_prefix}_#{$propkey} {
+      #{$css_attribute}: #{$propvalue} !important;
+      @content;
+    }
+  }
+
+  @if $responsive {
+    @each $size, $size_value in $breakpoints_grid {
+      @each $prop_key, $prop_value in $props {
+          $min_size: map-get($size_value, "min");
+          $max_size: map-get($size_value, "max");
+          .#{$class_prefix}_#{$size}_#{$prop_key} {
+            @include break_on($min_size, $max_size) {
+              #{$css_attribute}: #{$prop_value} !important;
+            }
+          }
+      }
+    }
+  }
+}
+
+@mixin global_props_responsive_css($props, $class_prefix, $css_attribute) {
+  @include global_props_css($props, $class_prefix, $css_attribute, 1)
+}
diff --git a/playbook/app/pb_kits/playbook/utilities/_order.scss b/playbook/app/pb_kits/playbook/utilities/_order.scss
index 1b8cd76589..91763421e5 100644
--- a/playbook/app/pb_kits/playbook/utilities/_order.scss
+++ b/playbook/app/pb_kits/playbook/utilities/_order.scss
@@ -1,55 +1,17 @@
-.order_1 {
-  order: 1 !important;
-}
-
-.order_2 {
-  order: 2 !important;
-}
-
-.order_3 {
-  order: 3 !important;
-}
-
-.order_4 {
-  order: 4 !important;
-}
-
-.order_5 {
-  order: 5 !important;
-}
-
-.order_6 {
-  order: 6 !important;
-}
-
-.order_7 {
-  order: 7 !important;
-}
-
-.order_8 {
-  order: 8 !important;
-}
-
-.order_9 {
-  order: 9 !important;
-}
-
-.order_10 {
-  order: 10 !important;
-}
-
-.order_11 {
-  order: 11 !important;
-}
-
-.order_12 {
-  order: 12 !important;
-}
-
-.order_none {
-  order: none !important;
-}
-
-.order_first {
-  order: -1 !important;
-}
\ No newline at end of file
+$order_values: (
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
+
+@include global_props_responsive_css($order_values, 'flex_order', 'order');
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
index b3dcf706ca..d40b0545e0 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts
+++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -44,8 +44,6 @@ type FlexDirection = {
   flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
 }
 
-// type FlexDirectionOptions = "row" | "column" | "row_reverse" | "column_reverse"
-
 type FlexGrow = {
   flexGrow?: 0 | 1
 }
@@ -119,6 +117,14 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
   Shadow & ZIndex
 
+const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
+  const keys: string[] = Object.keys(prop)
+  return keys.map((size: Sizes) => {
+    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
+    return `${classPrefix}_${size}_${propValue}`
+  }).join(" ")
+}
+
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
   spacingProps: ({
@@ -154,11 +160,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += padding ? `p_${padding} ` : ''
     return css
   },
-  darkProps: ({ dark }: Dark) => {
-    let css = ''
-    css += dark ? 'dark' : ''
-    return css
-  },
+  darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''
     css += numberSpacing ? `ns_${numberSpacing} ` : ''
@@ -206,48 +208,81 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += cursor ? `cursor_${cursor} ` : ''
     return css
   },
-  alignItemsProps: ({ alignItems }: AlignItems) => {
-    return alignItems ? `align_items_${camelToSnakeCase(alignItems)}` : ''
-  },
   alignContentProps: ({ alignContent }: AlignContent) => {
+    if (typeof alignContent === 'object') {
+      return getResponsivePropClasses(alignContent, 'align_content')
+    }
     return alignContent ? `align_content_${camelToSnakeCase(alignContent)}` : ''
   },
+  alignItemsProps: ({ alignItems }: AlignItems) => {
+    if (typeof alignItems === 'object') {
+      return getResponsivePropClasses(alignItems, 'align_items')
+    } else {
+      return alignItems ? `align_items_${camelToSnakeCase(alignItems)}` : ''
+    }
+  },
   alignSelfProps: ({ alignSelf }: AlignSelf) => {
-    return alignSelf ? `align_self_${alignSelf}` : ''
+    if (typeof alignSelf === 'object') {
+      return getResponsivePropClasses(alignSelf, 'align_self')
+    } else {
+      return alignSelf ? `align_self_${alignSelf}` : ''
+    }
   },
   flexDirectionProps: ({ flexDirection }: FlexDirection) => {
     if (typeof flexDirection == 'object') {
-      const flexKeys: string[] = Object.keys(flexDirection)
-      return flexKeys.map((size: Sizes) => {
-        const flexDirectionValue: string = flexDirection[size]
-        return `flex_direction_${size}_${flexDirectionValue}`
-      }).join(" ")
+      return getResponsivePropClasses(flexDirection, 'flex_direction')
     } else {
       return flexDirection ? `flex_direction_${camelToSnakeCase(flexDirection)}` : ''
     }
   },
   flexWrapProps: ({ flexWrap }: FlexWrap) => {
-    let css = ''
-    css += flexWrap ? `flex_wrap_${flexWrap}` : ''
-    return css
+    if (typeof flexWrap == 'object') {
+      return getResponsivePropClasses(flexWrap, 'flex_wrap')
+    } else {
+      return flexWrap ? `flex_wrap_${camelToSnakeCase(flexWrap)}` : ''
+    }
   },
   flexProps: ({ flex }: Flex) => {
-    return flex ? `flex_${flex}` : ''
+    if (typeof flex === 'object') {
+      return getResponsivePropClasses(flex, 'flex')
+    } else {
+      return flex ? `flex_${flex}` : ''
+    }
   },
   flexGrowProps: ({ flexGrow }: FlexGrow) => {
-    return flexGrow ? `flex_grow_${flexGrow}` : ''
+    if (typeof flexGrow == 'object') {
+      return getResponsivePropClasses(flexGrow, 'flex_grow')
+    } else {
+      return flexGrow ? `flex_grow_${flexGrow}` : ''
+    }
   },
   flexShrinkProps: ({ flexShrink }: FlexShrink) => {
-    return flexShrink ? `flex_shrink_${flexShrink}` : ''
+    if (typeof flexShrink == 'object') {
+      return getResponsivePropClasses(flexShrink, 'flex_shrink')
+    } else {
+      return flexShrink ? `flex_shrink_${flexShrink}` : ''
+    }
   },
   justifyContentProps: ({ justifyContent }: JustifyContent) => {
-    return justifyContent ? `justify_content_${camelToSnakeCase(justifyContent)}` : ''
+    if (typeof justifyContent === 'object') {
+      return getResponsivePropClasses(justifyContent, 'justify_content')
+    } else {
+      return justifyContent ? `justify_content_${camelToSnakeCase(justifyContent)}` : ''
+    }
   },
   justifySelfProps: ({ justifySelf }: JustifySelf) => {
-    return justifySelf ? `justify_self_${justifySelf}` : ''
+    if (typeof justifySelf === 'object') {
+      return getResponsivePropClasses(justifySelf, 'justify_self')
+    } else {
+      return justifySelf ? `justify_self_${justifySelf}` : ''
+    }
   },
   orderProps: ({ order }: Order) => {
-    return order ? `order_${order}` : ''
+    if (typeof order === 'object') {
+      return getResponsivePropClasses(order, 'flex_order')
+    } else {
+      return order ? `flex_order_${order}` : ''
+    }
   }
 }
 
diff --git a/playbook/app/pb_kits/playbook/utilities/test-utils.js b/playbook/app/pb_kits/playbook/utilities/test-utils.js
index a198cc506c..31805b4eac 100644
--- a/playbook/app/pb_kits/playbook/utilities/test-utils.js
+++ b/playbook/app/pb_kits/playbook/utilities/test-utils.js
@@ -27,6 +27,8 @@ const customRender = (ui, options) =>
 export * from '@testing-library/react'
 export { customRender as render }
 
+export const SCREEN_SIZES = ["xs", "sm", "md", "lg", "xl"]
+
 export const renderKit = (Kit, props = {}, newProps = {}) => {
   const kitProps = { ...props, ...newProps }
   render(<Kit {...kitProps} />)
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
new file mode 100644
index 0000000000..c3ea012f94
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          alignContent={`${propValues[x]}`}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`align_content_${camelToSnakeCase(propValues[x])}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js
new file mode 100644
index 0000000000..7827e2d327
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "baseline", "stretch", "flexStart", "flexEnd"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          alignItems={`${propValues[x]}`}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`align_items_${camelToSnakeCase(propValues[x])}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js
new file mode 100644
index 0000000000..b3ef1269b6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "stretch", "baseline", "auto"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          alignSelf={`${propValues[x]}`}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`align_self_${camelToSnakeCase(propValues[x])}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js
new file mode 100644
index 0000000000..3c298068d8
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 13; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flex={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_${x}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${x}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flex={{ [size]: x }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_${size}_${x}`)
+    })
+  }
+})
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["auto", "initial", "none"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flex={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_${propValues[x]}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flex={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_${size}_${propValues[x]}`)
+    })
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js
new file mode 100644
index 0000000000..bd932f1369
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["row", "column", "columnReverse"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexDirection={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_direction_${camelToSnakeCase(propValues[x])}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexDirection={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_direction_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js
new file mode 100644
index 0000000000..2f6f43f2d0
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+
+const testSubject = 'body'
+
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 2; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexGrow={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_grow_${x}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js
new file mode 100644
index 0000000000..e91eae34a0
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+
+const testSubject = 'body'
+
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 2; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexShrink={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_shrink_${x}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js
new file mode 100644
index 0000000000..cf5605714a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["wrap", "nowrap", "wrapReverse"]
+  for(let x = 0, y = 3; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexWrap={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_wrap_${camelToSnakeCase(propValues[x])}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js
new file mode 100644
index 0000000000..e77fb08e3d
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../text'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          justifyContent={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`justify_content_${camelToSnakeCase(propValues[x])}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
new file mode 100644
index 0000000000..7a082177a9
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../text'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "auto", "stretch"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          justifySelf={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`justify_self_${camelToSnakeCase(propValues[x])}`)
+  }
+})
diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/order.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/order.test.js
new file mode 100644
index 0000000000..b8dd96fd0e
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/order.test.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+
+const testSubject = 'body'
+
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 1, y = 13; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          order={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_order_${x}`)
+  }
+})
diff --git a/playbook/lib/playbook/align_content.rb b/playbook/lib/playbook/align_content.rb
index 8471c50d79..3766232706 100644
--- a/playbook/lib/playbook/align_content.rb
+++ b/playbook/lib/playbook/align_content.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :align_content
     end
 
+    # rubocop:disable Style/IfInsideElse
     def align_content_props
       selected_props = align_content_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
-        align_content_value = send(k)
-        "align_content_#{align_content_value}" if align_content_values.include? align_content_value
+        align_content = send(k)
+        if align_content.is_a?(Hash)
+          align_content.map do |media_size, align_value|
+            "align_content_#{media_size}_#{align_value.underscore}" if align_content_values.include? align_value
+          end
+        else
+          "align_content_#{align_content.underscore}" if align_content_values.include? align_content
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def align_content_options
       {
@@ -23,7 +31,7 @@ def align_content_options
     end
 
     def align_content_values
-      %w[start end center space_between space_around space_evenly]
+      %w[start end center spaceBetween spaceAround spaceEvenly]
     end
   end
 end
diff --git a/playbook/lib/playbook/align_items.rb b/playbook/lib/playbook/align_items.rb
index 6661555b15..0a454feecb 100644
--- a/playbook/lib/playbook/align_items.rb
+++ b/playbook/lib/playbook/align_items.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :align_items
     end
 
+    # rubocop:disable Style/IfInsideElse
     def align_items_props
       selected_props = align_items_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         align_items_value = send(k)
-        "align_items_#{align_items_value}" if align_items_values.include? align_items_value
+        if align_items_value.is_a?(Hash)
+          align_items_value.map do |media_size, align_value|
+            "align_items_#{media_size}_#{align_value.underscore}" if align_items_values.include? align_value.to_s
+          end
+        else
+          "align_items_#{align_items_value.underscore}" if align_items_values.include? align_items_value
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def align_items_options
       {
@@ -23,7 +31,7 @@ def align_items_options
     end
 
     def align_items_values
-      %w[flex_start flex_end start end center baseline stretch]
+      %w[flexStart flexEnd start end center baseline stretch]
     end
   end
 end
diff --git a/playbook/lib/playbook/align_self.rb b/playbook/lib/playbook/align_self.rb
index 11a89db8e4..3d49521a77 100644
--- a/playbook/lib/playbook/align_self.rb
+++ b/playbook/lib/playbook/align_self.rb
@@ -6,14 +6,22 @@ def self.included(base)
       base.prop :align_self
     end
 
+    # rubocop:disable Style/IfInsideElse
     def align_self_props
       selected_props = align_self_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         align_self_value = send(k)
-        "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+        if align_self_value.is_a?(Hash)
+          align_self_value.map do |media_size, align_value|
+            "align_self_#{media_size}_#{align_value}" if align_self_values.include? align_value
+          end
+        else
+          "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+        end
       end.compact.join(" ")
+      # rubocop:enable Style/IfInsideElse
     end
 
     def align_self_options
diff --git a/playbook/lib/playbook/flex.rb b/playbook/lib/playbook/flex.rb
index 967481077d..d667ea2cf9 100644
--- a/playbook/lib/playbook/flex.rb
+++ b/playbook/lib/playbook/flex.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :flex
     end
 
+    # rubocop:disable Style/IfInsideElse
     def flex_props
       selected_props = flex_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         flex_value = send(k)
-        "flex_#{flex_value}" if flex_values.include? flex_value
+        if flex_value.is_a?(Hash)
+          flex_value.map do |media_size, value|
+            "flex_#{media_size}_#{value}" if flex_values.include? value.to_s
+          end
+        else
+          "flex_#{flex_value}" if flex_values.include? flex_value.to_s
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def flex_options
       {
diff --git a/playbook/lib/playbook/flex_direction.rb b/playbook/lib/playbook/flex_direction.rb
index 25601db436..44c0200330 100644
--- a/playbook/lib/playbook/flex_direction.rb
+++ b/playbook/lib/playbook/flex_direction.rb
@@ -6,6 +6,7 @@ def self.included(base)
       base.prop :flex_direction
     end
 
+    # rubocop:disable Style/IfInsideElse
     def flex_direction_props
       selected_props = flex_direction_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
@@ -14,13 +15,14 @@ def flex_direction_props
         flex_direction_value = send(k)
         if flex_direction_value.is_a?(Hash)
           flex_direction_value.map do |media_size, flex_value|
-            "flex_direction_#{media_size}_#{flex_value}"
+            "flex_direction_#{media_size}_#{flex_value.underscore}" if flex_direction_values.include? flex_value
           end
         else
-          "flex_direction_#{flex_direction_value}" unless flex_direction_value.nil?
+          "flex_direction_#{flex_direction_value.underscore}" if flex_direction_values.include? flex_direction_value
         end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def flex_direction_options
       {
@@ -29,7 +31,7 @@ def flex_direction_options
     end
 
     def flex_direction_values
-      %w[row column row_reverse column_reverse]
+      %w[row column rowReverse columnReverse]
     end
   end
 end
diff --git a/playbook/lib/playbook/flex_grow.rb b/playbook/lib/playbook/flex_grow.rb
index f43c76e593..2c49a97fd7 100644
--- a/playbook/lib/playbook/flex_grow.rb
+++ b/playbook/lib/playbook/flex_grow.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :flex_grow
     end
 
+    # rubocop:disable Style/IfInsideElse
     def flex_grow_props
       selected_props = flex_grow_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         flex_grow_value = send(k)
-        "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value
+        if flex_grow_value.is_a?(Hash)
+          flex_grow_value.map do |media_size, grow_value|
+            "flex_grow_#{media_size}_#{grow_value}" if flex_grow_values.include? grow_value.to_s
+          end
+        else
+          "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value.to_s
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def flex_grow_options
       {
diff --git a/playbook/lib/playbook/flex_shrink.rb b/playbook/lib/playbook/flex_shrink.rb
index ca7d3e4f88..0cbdaa580c 100644
--- a/playbook/lib/playbook/flex_shrink.rb
+++ b/playbook/lib/playbook/flex_shrink.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :flex_shrink
     end
 
+    # rubocop:disable Style/IfInsideElse
     def flex_shrink_props
       selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         flex_shrink_value = send(k)
-        "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value
+        if flex_shrink_value.is_a?(Hash)
+          flex_shrink_value.map do |media_size, shrink_value|
+            "flex_shrink_#{media_size}_#{shrink_value}" if flex_shrink_values.include? shrink_value.to_s
+          end
+        else
+          "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value.to_s
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def flex_shrink_options
       {
diff --git a/playbook/lib/playbook/flex_wrap.rb b/playbook/lib/playbook/flex_wrap.rb
index 693e6a6a89..d67affec43 100644
--- a/playbook/lib/playbook/flex_wrap.rb
+++ b/playbook/lib/playbook/flex_wrap.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :flex_wrap
     end
 
+    # rubocop:disable Style/IfInsideElse
     def flex_wrap_props
       selected_props = flex_wrap_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         flex_wrap_value = send(k)
-        "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
+        if flex_wrap_value.is_a?(Hash)
+          flex_wrap_value.map do |media_size, wrap_value|
+            "flex_wrap_#{media_size}_#{wrap_value.underscore}" if flex_wrap_values.include? wrap_value
+          end
+        else
+          "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def flex_wrap_options
       {
@@ -23,7 +31,7 @@ def flex_wrap_options
     end
 
     def flex_wrap_values
-      %w[wrap nowrap wrap_reverse]
+      %w[wrap nowrap wrapReverse]
     end
   end
 end
diff --git a/playbook/lib/playbook/justify_content.rb b/playbook/lib/playbook/justify_content.rb
index 183f8dd765..974662ec35 100644
--- a/playbook/lib/playbook/justify_content.rb
+++ b/playbook/lib/playbook/justify_content.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :justify_content
     end
 
+    # rubocop:disable Style/IfInsideElse
     def justify_content_props
       selected_props = justify_content_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         justify_content_value = send(k)
-        "justify_content_#{justify_content_value}" if justify_content_values.include? justify_content_value
+        if justify_content_value.is_a?(Hash)
+          justify_content_value.map do |media_size, justify_value|
+            "justify_content_#{media_size}_#{justify_value.underscore}" if justify_content_values.include? justify_value
+          end
+        else
+          "justify_content_#{justify_content_value.underscore}" if justify_content_values.include? justify_content_value
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def justify_content_options
       {
@@ -23,7 +31,7 @@ def justify_content_options
     end
 
     def justify_content_values
-      %w[start end center space_between space_around space_evenly]
+      %w[start end center spaceBetween spaceAround spaceEvenly]
     end
   end
 end
diff --git a/playbook/lib/playbook/justify_self.rb b/playbook/lib/playbook/justify_self.rb
index 85fc1f3c3a..f19280be3d 100644
--- a/playbook/lib/playbook/justify_self.rb
+++ b/playbook/lib/playbook/justify_self.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :justify_self
     end
 
+    # rubocop:disable Style/IfInsideElse
     def justify_self_props
       selected_props = justify_self_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         justify_self_value = send(k)
-        "justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
+        if justify_self_value.is_a?(Hash)
+          justify_self_value.map do |media_size, self_value|
+            "justify_self_#{media_size}_#{self_value}" if justify_self_values.include? self_value
+          end
+        else
+          "justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def justify_self_options
       {
diff --git a/playbook/lib/playbook/order.rb b/playbook/lib/playbook/order.rb
index 70ae62e953..0f752c15fb 100644
--- a/playbook/lib/playbook/order.rb
+++ b/playbook/lib/playbook/order.rb
@@ -6,15 +6,23 @@ def self.included(base)
       base.prop :order
     end
 
+    # rubocop:disable Style/IfInsideElse
     def order_props
       selected_props = order_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
       selected_props.map do |k|
         order_value = send(k)
-        "order_#{order_value}" if order_values.include? order_value
+        if order_value.is_a?(Hash)
+          order_value.map do |media_size, order_size_value|
+            "flex_order_#{media_size}_#{order_size_value}" if order_values.include? order_size_value.to_s
+          end
+        else
+          "flex_order_#{order_value}" if order_values.include? order_value.to_s
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
 
     def order_options
       {
@@ -23,7 +31,7 @@ def order_options
     end
 
     def order_values
-      %w[1 2 3 4 5 6 7 8 9 10 11 12 first none]
+      %w[1 2 3 4 5 6 7 8 9 10 11 12]
     end
   end
 end
diff --git a/playbook/spec/pb_kits/playbook/kits/flex_item_spec.rb b/playbook/spec/pb_kits/playbook/kits/flex_item_spec.rb
index 9e5e46c05e..b1a832cc5e 100644
--- a/playbook/spec/pb_kits/playbook/kits/flex_item_spec.rb
+++ b/playbook/spec/pb_kits/playbook/kits/flex_item_spec.rb
@@ -15,7 +15,7 @@
   it { is_expected.to define_string_prop(:fixed_size) }
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
-      expect(subject.new(order: "1").classname).to eq "pb_flex_item_kit order_1"
+      expect(subject.new(order: "1").classname).to eq "pb_flex_item_kit flex_order_1"
       expect(subject.new({}).classname).to eq "pb_flex_item_kit"
       expect(subject.new(grow: true).classname).to eq "pb_flex_item_kit_grow"
       expect(subject.new(shrink: true).classname).to eq "pb_flex_item_kit_shrink"
diff --git a/playbook/spec/playbook/global_props/align_content_spec.rb b/playbook/spec/playbook/global_props/align_content_spec.rb
new file mode 100644
index 0000000000..a3b024f3f5
--- /dev/null
+++ b/playbook/spec/playbook/global_props/align_content_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns proper class name", :aggregate_failures do
+      %w[start end center spaceBetween spaceAround spaceEvenly].each do |word|
+        expect(subject.new({ align_content: word }).classname).to include("align_content_#{word.underscore}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ align_content: obj }).classname).to include("align_content_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/align_items_spec.rb b/playbook/spec/playbook/global_props/align_items_spec.rb
new file mode 100644
index 0000000000..e270a85b06
--- /dev/null
+++ b/playbook/spec/playbook/global_props/align_items_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns proper class name", :aggregate_failures do
+      %w[flexStart flexEnd start end center baseline stretch].each do |word|
+        expect(subject.new({ align_items: word }).classname).to include("align_items_#{word.underscore}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ align_items: obj }).classname).to include("align_items_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/align_self_spec.rb b/playbook/spec/playbook/global_props/align_self_spec.rb
new file mode 100644
index 0000000000..44cac015ad
--- /dev/null
+++ b/playbook/spec/playbook/global_props/align_self_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns proper class name", :aggregate_failures do
+      %w[auto start end center stretch baseline].each do |word|
+        expect(subject.new({ align_self: word }).classname).to include("align_self_#{word.underscore}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ align_self: obj }).classname).to include("align_self_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/flex_direction_spec.rb b/playbook/spec/playbook/global_props/flex_direction_spec.rb
new file mode 100644
index 0000000000..348d3c776d
--- /dev/null
+++ b/playbook/spec/playbook/global_props/flex_direction_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns proper class name", :aggregate_failures do
+      %w[row column rowReverse columnReverse].each do |word|
+        expect(subject.new({ flex_direction: word }).classname).to include("flex_direction_#{word.underscore}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ flex_direction: obj }).classname).to include("flex_direction_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/flex_grow_spec.rb b/playbook/spec/playbook/global_props/flex_grow_spec.rb
new file mode 100644
index 0000000000..a27dcfcc23
--- /dev/null
+++ b/playbook/spec/playbook/global_props/flex_grow_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::FlexGrow do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns ordinal suffixed class name", :aggregate_failures do
+      2.times do |num|
+        expect(subject.new({ flex_grow: num }).classname).to include("flex_grow_#{num}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = num
+          expect(subject.new({ flex_grow: obj }).classname).to include("flex_grow_#{size}_#{num}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/flex_shrink_spec.rb b/playbook/spec/playbook/global_props/flex_shrink_spec.rb
new file mode 100644
index 0000000000..4a9431a208
--- /dev/null
+++ b/playbook/spec/playbook/global_props/flex_shrink_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::FlexGrow do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns ordinal suffixed class name", :aggregate_failures do
+      2.times do |num|
+        expect(subject.new({ flex_shrink: num }).classname).to include("flex_shrink_#{num}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = num
+          expect(subject.new({ flex_shrink: obj }).classname).to include("flex_shrink_#{size}_#{num}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/flex_spec.rb b/playbook/spec/playbook/global_props/flex_spec.rb
new file mode 100644
index 0000000000..de8d0625b4
--- /dev/null
+++ b/playbook/spec/playbook/global_props/flex_spec.rb
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns ordinal suffixed class name", :aggregate_failures do
+      13.times do |num|
+        expect(subject.new({ flex: num }).classname).to include("flex_#{num}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = num
+          expect(subject.new({ flex: obj }).classname).to include("flex_#{size}_#{num}")
+        end
+      end
+    end
+
+    it "returns proper class name", :aggregate_failures do
+      %w[auto initial none].each do |word|
+        expect(subject.new({ flex: word }).classname).to include("flex_#{word}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ flex: obj }).classname).to include("flex_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/flex_wrap_spec.rb b/playbook/spec/playbook/global_props/flex_wrap_spec.rb
new file mode 100644
index 0000000000..076014c149
--- /dev/null
+++ b/playbook/spec/playbook/global_props/flex_wrap_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns proper class name", :aggregate_failures do
+      %w[wrap nowrap wrapReverse].each do |word|
+        expect(subject.new({ flex_wrap: word }).classname).to include("flex_wrap_#{word}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ flex_wrap: obj }).classname).to include("flex_wrap_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/justify_content_spec.rb b/playbook/spec/playbook/global_props/justify_content_spec.rb
new file mode 100644
index 0000000000..19ba03a575
--- /dev/null
+++ b/playbook/spec/playbook/global_props/justify_content_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns proper class name", :aggregate_failures do
+      %w[start end center spaceBetween spaceAround spaceEvenly].each do |word|
+        expect(subject.new({ justify_content: word }).classname).to include("justify_content_#{word.underscore}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ justify_content: obj }).classname).to include("justify_content_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/justify_self_spec.rb b/playbook/spec/playbook/global_props/justify_self_spec.rb
new file mode 100644
index 0000000000..e07a047d5d
--- /dev/null
+++ b/playbook/spec/playbook/global_props/justify_self_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns proper class name", :aggregate_failures do
+      %w[auto start end center stretch].each do |word|
+        expect(subject.new({ justify_self: word }).classname).to include("justify_self_#{word.underscore}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = word
+          expect(subject.new({ justify_self: obj }).classname).to include("justify_self_#{size}_#{word.underscore}")
+        end
+      end
+    end
+  end
+end
diff --git a/playbook/spec/playbook/global_props/order_spec.rb b/playbook/spec/playbook/global_props/order_spec.rb
new file mode 100644
index 0000000000..8f101c98cb
--- /dev/null
+++ b/playbook/spec/playbook/global_props/order_spec.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../../../app/pb_kits/playbook/pb_body/body"
+
+RSpec.describe Playbook::Flex do
+  subject { Playbook::PbBody::Body }
+  let(:screen_sizes) { %w[xs sm md lg xl] }
+
+  describe "#classname" do
+    it "returns ordinal suffixed class name", :aggregate_failures do
+      (1..12).each do |num|
+        expect(subject.new({ order: num }).classname).to include("flex_order_#{num}")
+
+        screen_sizes.each do |size|
+          obj = {}
+          obj[size] = num
+          expect(subject.new({ order: obj }).classname).to include("order_#{size}_#{num}")
+        end
+      end
+    end
+  end
+end