patternfly
diff --git a/...es/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx b/...es/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarContent.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar';
 import { css } from '@patternfly/react-styles';
 
-import { DataToolbarBreakpointMod, formatBreakpointMods } from './DataToolbarUtils';
+import { DataToolbarBreakpointMod } from './DataToolbarUtils';
+import { formatBreakpointMods } from '../../../helpers/util';
 
 export interface DataToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the Data toolbar content row */
@@ -24,7 +25,7 @@ export const DataToolbarContent: React.FunctionComponent<DataToolbarContentProps
     <div
       className={
         css(styles.dataToolbarContent,
-          formatBreakpointMods(breakpointMods),
+          formatBreakpointMods(breakpointMods, styles),
           className)}
       {...props}
     >

diff --git a/...ages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx b/...ages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx
@@ -5,9 +5,9 @@ import { css, getModifier } from '@patternfly/react-styles';
 import {
   DataToolbarBreakpointMod,
   DataToolbarSpacer,
-  formatBreakpointMods,
   formatSpacers
 } from './DataToolbarUtils';
+import { formatBreakpointMods } from '../../../helpers/util';
 
 export enum DataToolbarGroupVariant {
   'filter-group' = 'filter-group',
@@ -45,7 +45,7 @@ export const DataToolbarGroup: React.FunctionComponent<DataToolbarGroupProps> =
       className={css(
         styles.dataToolbarGroup,
         variant && getModifier(styles, variant),
-        formatBreakpointMods(breakpointMods),
+        formatBreakpointMods(breakpointMods, styles),
         formatSpacers(itemSpacers, 'pf-m-space-items'),
         formatSpacers(spacers),
         className)}

diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx
@@ -5,9 +5,9 @@ import { css, getModifier } from '@patternfly/react-styles';
 import {
   DataToolbarBreakpointMod,
   DataToolbarSpacer,
-  formatBreakpointMods,
   formatSpacers
 } from './DataToolbarUtils';
+import { formatBreakpointMods } from '../../../helpers/util';
 
 export enum DataToolbarItemVariant {
   separator = 'separator',
@@ -51,7 +51,7 @@ export const DataToolbarItem: React.FunctionComponent<DataToolbarItemProps> = ({
       className={css(
         styles.dataToolbarItem,
         variant && getModifier(styles, variant),
-        formatBreakpointMods(breakpointMods),
+        formatBreakpointMods(breakpointMods, styles),
         formatSpacers(spacers),
         className)}
       {...labelVariant && { 'aria-hidden': true }}

diff --git a/...atternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx b/...atternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx
@@ -9,9 +9,9 @@ import { Button } from '../../../components/Button';
 import {
   DataToolbarBreakpointMod,
   DataToolbarSpacer,
-  formatBreakpointMods,
   formatSpacers
 } from './DataToolbarUtils';
+import { formatBreakpointMods } from '../../../helpers/util';
 
 export interface DataToolbarToggleGroupProps extends DataToolbarGroupProps {
   /** An Icon to be rendered when the toggle group has collapsed down */
@@ -38,7 +38,7 @@ export class DataToolbarToggleGroup extends React.Component<DataToolbarToggleGro
               className={css(
                 styles.dataToolbarGroup,
                 variant && getModifier(styles, variant),
-                formatBreakpointMods(breakpointMods),
+                formatBreakpointMods(breakpointMods, styles),
                 formatSpacers(spacers, 'pf-m-space-items'),
                 getModifier(styles, 'toggle-group'),
                 getModifier(styles, `reveal-on-${breakpoint}`),

diff --git a/...ages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx b/...ages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx
@@ -1,5 +1,3 @@
-import { getModifier } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/DataToolbar/data-toolbar';
 import * as React from 'react';
 import { RefObject } from 'react';
 
@@ -19,12 +17,6 @@ export type DataToolbarBreakpointMod = {
   breakpoint: 'md' | 'lg' | 'xl' | '2xl';
 };
 
-export const formatBreakpointMods = (breakpointMods: DataToolbarBreakpointMod[]) => {
-  return breakpointMods.reduce((acc, curr) => (
-    `${acc} ${getModifier(styles, `${curr.modifier}${curr.breakpoint  ? `-on-${curr.breakpoint}` : ''}`)}`
-  ), '');
-};
-
 export type DataToolbarSpacer = {
   /** The size of the spacer */
   spacerSize: 'none' | 'sm' | 'md' | 'lg';

diff --git a/packages/patternfly-4/react-core/src/helpers/util.test.js b/packages/patternfly-4/react-core/src/helpers/util.test.js
@@ -8,9 +8,11 @@ import {
   isElementInView,
   sideElementIsOutOfView,
   fillTemplate,
-  pluralize
+  pluralize,
+  formatBreakpointMods
 } from './util';
 import { KEY_CODES, SIDE } from './constants';
+import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 
 const createMockHtmlElement = bounds => ({
   getBoundingClientRect: () => bounds
@@ -229,3 +231,9 @@ test('text pluralize', () => {
   expect(pluralize(2, 'dog')).toEqual('2 dogs');
   expect(pluralize(2, 'finch', 'finches')).toEqual('2 finches');
 });
+
+test('formatBreakpointMods', () => {
+  expect(formatBreakpointMods([{modifier: "spacer-none"}], styles)).toEqual('pf-m-spacer-none');
+  expect(formatBreakpointMods([{modifier: "spacer-none", breakpoint: 'md'}], styles)).toEqual('pf-m-spacer-none-on-md');
+  expect(formatBreakpointMods([{modifier: "column"}, {modifier: "row", breakpoint: "lg"}], styles)).toEqual('pf-m-column pf-m-row-on-lg');
+});
diff --git a/packages/patternfly-4/react-core/src/helpers/util.ts b/packages/patternfly-4/react-core/src/helpers/util.ts
@@ -1,5 +1,8 @@
 import * as ReactDOM from 'react-dom';
 import { SIDE } from './constants';
+import { getModifier } from '@patternfly/react-styles';
+import { DataToolbarBreakpointMod } from '../experimental/components/DataToolbar/DataToolbarUtils';
+import { FlexBreakpointMod, FlexItemBreakpointMod }  from '../layouts/Flex/FlexUtils';
 
 export function capitalize(input: string) {
   return input[0].toUpperCase() + input.substring(1);
@@ -177,3 +180,13 @@ export function pluralize(i: number, singular: string, plural?: string) {
   }
   return `${i || 0} ${i === 1 ? singular : plural}`;
 }
+
+/** This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
+ * @param {(DataToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod)[]} breakpointMods The modifiers object
+ * @param {any} styles The appropriate styles object for the component
+ */
+export const formatBreakpointMods = (breakpointMods: (DataToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod)[], styles: any) => {
+  return breakpointMods.reduce((acc: string, curr: (DataToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod)) => (
+    `${acc}${acc && ' '}${getModifier(styles, `${curr.modifier}${curr.breakpoint  ? `-on-${curr.breakpoint}` : ''}`)}`
+  ), '');
+};
diff --git a/packages/patternfly-4/react-core/src/layouts/Flex/Flex.test.tsx b/packages/patternfly-4/react-core/src/layouts/Flex/Flex.test.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Flex } from './Flex';
+import { FlexItem } from './FlexItem';
+import { shallow } from 'enzyme';
+
+test('Simple flex with single item', () => {
+  const view = shallow(
+    <Flex>
+      <FlexItem>Test</FlexItem>
+    </Flex>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Nested flex', () => {
+  const view = shallow(
+    <Flex>
+      <Flex>
+        <FlexItem>Test</FlexItem>
+      </Flex>
+    </Flex>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<Flex className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'flex';
+  const view = shallow(<Flex data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
diff --git a/packages/patternfly-4/react-core/src/layouts/Flex/Flex.tsx b/packages/patternfly-4/react-core/src/layouts/Flex/Flex.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
+
+import { formatBreakpointMods } from '../../helpers/util';
+import { FlexBreakpointMod } from './FlexUtils';
+
+export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
+   /** content rendered inside the Flex layout */
+   children?: React.ReactNode;
+   /** additional classes added to the Flex layout */
+   className?: string;
+   /** An array of objects representing the various modifiers to apply to the flex component at various breakpoints */
+   breakpointMods?: FlexBreakpointMod[];
+}
+
+export const Flex: React.FunctionComponent<FlexProps> =  ({
+  children = null,
+  className = '',
+  breakpointMods = [] as FlexBreakpointMod[],
+  ...props
+}: FlexProps) => (
+  <div
+    className={css(
+      styles.flex,
+      breakpointMods.length > 0 && formatBreakpointMods(breakpointMods, styles),
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/patternfly-4/react-core/src/layouts/Flex/FlexItem.tsx b/packages/patternfly-4/react-core/src/layouts/Flex/FlexItem.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
+
+import { FlexItemBreakpointMod } from './FlexUtils';
+import { formatBreakpointMods } from '../../helpers/util';
+
+export interface FlexItemProps extends React.HTMLProps<HTMLDivElement> {
+   /** content rendered inside the Flex layout */
+   children?: React.ReactNode;
+   /** additional classes added to the Flex layout */
+   className?: string;
+   /** An array of objects representing the various modifiers to apply to the flex item at various breakpoints */
+   breakpointMods?: FlexItemBreakpointMod[];
+}
+
+export const FlexItem: React.FunctionComponent<FlexItemProps> =  ({
+  children = null,
+  className = '',
+  breakpointMods = [] as FlexItemBreakpointMod[],
+  ...props
+}: FlexItemProps) => (
+  <div
+    {...props}
+    className={css(
+      breakpointMods.length > 0 && formatBreakpointMods(breakpointMods, styles),
+      className
+    )}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/patternfly-4/react-core/src/layouts/Flex/FlexUtils.tsx b/packages/patternfly-4/react-core/src/layouts/Flex/FlexUtils.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { getModifier } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
+
+export type FlexBreakpointMod = {
+  /** The attribute to modify  */
+  modifier: 'flex' | 'inline-flex' | 'spacer-none' | 'spacer-xs' | 'spacer-sm' | 'spacer-md' | 'spacer-lg' | 'spacer-xl' | 'spacer-2xl' | 'spacer-3xl' | 'space-items-none' | 'space-items-xs' | 'space-items-sm' | 'space-items-md' | 'space-items-lg' | 'space-items-xl' | 'space-items-2xl' | 'space-items-3xl' | 'grow' | 'shrink' | 'flex-1' | 'flex-2' | 'flex-3' | 'flex-4' | 'flex-default' | 'flex-none' | 'column' | 'column-reverse' | 'row' | 'row-reverse' | 'wrap' | 'wrap-reverse' | 'nowrap' | 'align-right' | 'align-left' | 'align-self-flex-start' | 'align-self-flex-end' | 'align-self-flex-center' | 'align-self-flex-baseline' | 'align-self-flex-stretch' | 'justify-content-flex-end' | 'justify-content-center' | 'justify-content-flex-space-between' | 'justify-content-space-around' | 'justify-content-space-evenly' | 'justify-content-flex-start' | 'full-width' | 'align-items-flex-start' | 'align-items-flex-end' | 'align-items-center' | 'align-items-stretch' | 'align-items-baseline' | 'align-content-flex-start' | 'align-content-flex-end' | 'align-content-center' | 'align-content-stretch' | 'align-content-space-between' | 'align-content-space-around';
+  /** The breakpoint at which to apply the modifier */
+  breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+};
+
+export type FlexItemBreakpointMod = {
+  /** The attribute to modify  */
+  modifier: 'spacer-none' | 'spacer-xs' | 'spacer-sm' | 'spacer-md' | 'spacer-lg' | 'spacer-xl' | 'spacer-2xl' | 'spacer-3xl' | 'grow' | 'shrink' | 'flex-1' | 'flex-2' | 'flex-3' | 'flex-4' | 'flex-default' | 'flex-none' | 'align-right' | 'align-left' | 'align-self-flex-start' | 'align-self-flex-end' | 'align-self-flex-center' | 'align-self-flex-baseline' | 'align-self-flex-stretch' | 'full-width';
+  /** The breakpoint at which to apply the modifier */
+  breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+};
diff --git a/packages/patternfly-4/react-core/src/layouts/Flex/__snapshots__/Flex.test.tsx.snap b/packages/patternfly-4/react-core/src/layouts/Flex/__snapshots__/Flex.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Nested flex 1`] = `
+<div
+  className="pf-l-flex"
+>
+  <Component>
+    <Component>
+      Test
+    </Component>
+  </Component>
+</div>
+`;
+
+exports[`Simple flex with single item 1`] = `
+<div
+  className="pf-l-flex"
+>
+  <Component>
+    Test
+  </Component>
+</div>
+`;
+
+exports[`className is added to the root element 1`] = `"pf-l-flex extra-class"`;