title: How to do responsive flex with Styled System and Styled Components
body: <p>I'm trying to get me head around using <a href="https://jxnblk.com/styled-system" rel="nofollow noreferrer">Styled System</a> with <a href="https://www.styled-components.com/" rel="nofollow noreferrer">Styled Components</a>.</p>
  
  <p>I'm trying to have flex behave responsively (i.e. no flex at lower breakpoints). But I'm not having any luck.</p>
  
  <p>Does anyone know what I'm doing wrong?</p>
  
  <pre><code>import styled from 'styled-components';
  
  import { flexWrap } from 'styled-system';
  
  const Flex = styled.div`
    ${flexWrap};
  `;
  
  const App = () =&gt; (
    &lt;Flex flexWrap="wrap"&gt;
      &lt;div&gt;minimal&lt;/div&gt;
      &lt;div&gt;minimal&lt;/div&gt;
    &lt;/Flex&gt;
  );
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/n06754x304" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Minimal Flex Styled-System Styled-Component"></a></p>