Flex

<h3>Flex(box)</h3>
<p><code>.u-flex<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element display flex from the breakpoint referenced in the class name.</p>
<p><code>.u-inline-flex<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element display inline-flex from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-direction-row<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element flex-direction row from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-direction-row-reverse<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element flex-direction row-reverse from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-direction-column<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element flex-direction column from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-direction-column-reverse<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element flex-direction column-reverse from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-justify-content-start<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element justify-content flex-start from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-justify-content-end<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element justify-content flex-end from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-justify-content-center<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element justify-content center from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-justify-content-between<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element justify-content space-between from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-justify-content-around<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element justify-content space-around from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-items-start<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-items flex-start from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-items-end<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-items flex-end from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-items-center<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-items center from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-items-baseline<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-items baseline from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-items-stretch<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-items stretch from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-self-start<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-self flex-start from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-self-end<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-self flex-end from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-self-center<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-self center from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-self-baseline<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-self baseline from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-self-stretch<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-self stretch from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-content-start<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-content flex-start from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-content-end<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-content flex-end from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-content-center<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-content center from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-content-around<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-content space-around from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-align-content-stretch<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element align-content stretch from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-nowrap<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element flex-wrap nowrap from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-wrap<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element flex-wrap wrap from the breakpoint referenced in the class name.</p>
<p><code>.u-flex-wrap-reverse<strong>-{BREAKPOINT REFERENCE}</strong></code> Makes the element flex-wrap: wrap-reverse from the breakpoint referenced in the class name.</p>
<hr/>
<p>The above utility classes will allow you to amend the flexbox behaviour of an element based on the breakpoint reference you use from the default list below:</p>
<pre>
$breakpoints: (
    xs: 0px,
    sm: 544px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px
) !default;
</pre>
<p>Utility classes will be built for all breakpoints apart from ones with a 0px value.</p>
<p><em>The breakpoints here are the same breakpoints used for <stong>@vivid-web/flexboxgrid-sass</stong>.</em></p>
<p>Each breakpoint creates a min-width media query version of the utility class. This allows chaining of class names for responsive display styles. For instance, is you use the <strong>.u-flex/strong> class on an element, the element with have <code>display: flex;</code> from a window width of 0px, and then on if you add <strong>.u-inline-flex-md</strong>    to the same element, it will have <code>display: inline-flex;</code> from a window width of 768px</p>

<h4>Breakpoint Specific</h4>
<p>If you only want a certain style for a specific breakpoint, and no others, you can use the <strong>-specific</strong> suffix.</p>
<p>For example, if you only want to have the element to have flexbox applied from a window width 768px to 992px then you can use <strong>.u-flex-md-specific</strong></p>