Flex align

Magic combination of display: flex, justify-content and align-items in simple classes.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- Source -->
<div class="flex-none"></div>
<div class="flex-center"></div>
<div class="flex-y-center"></div>
<div class="flex-x-center"></div>
<div class="flex-left"></div>
<div class="flex-right"></div>
<div class="flex-between"></div>
<div class="flex-around"></div>
<div class="flex-top"></div>
<div class="flex-bottom"></div>
<div class="flex-baseline"></div>
<div class="flex-stretch"></div>

Responsive

<!-- Responsive -->
<div class="flex-sm-none"></div>
<div class="flex-sm-center"></div>
<div class="flex-y-sm-center"></div>
<div class="flex-x-sm-center"></div>
<div class="flex-sm-left"></div>
<div class="flex-sm-right"></div>
<div class="flex-sm-between"></div>
<div class="flex-sm-around"></div>
<div class="flex-sm-top"></div>
<div class="flex-sm-bottom"></div>
<div class="flex-sm-baseline"></div>
<div class="flex-sm-stretch"></div>

<div class="flex-md-none"></div>
<div class="flex-md-center"></div>
<div class="flex-y-md-center"></div>
<div class="flex-x-md-center"></div>
<div class="flex-md-left"></div>
<div class="flex-md-right"></div>
<div class="flex-md-between"></div>
<div class="flex-md-around"></div>
<div class="flex-md-top"></div>
<div class="flex-md-bottom"></div>
<div class="flex-md-baseline"></div>
<div class="flex-md-stretch"></div>

<div class="flex-lg-none"></div>
<div class="flex-lg-center"></div>
<div class="flex-y-lg-center"></div>
<div class="flex-x-lg-center"></div>
<div class="flex-lg-left"></div>
<div class="flex-lg-right"></div>
<div class="flex-lg-between"></div>
<div class="flex-lg-around"></div>
<div class="flex-lg-top"></div>
<div class="flex-lg-bottom"></div>
<div class="flex-lg-baseline"></div>
<div class="flex-lg-stretch"></div>

<div class="flex-xl-none"></div>
<div class="flex-xl-center"></div>
<div class="flex-y-xl-center"></div>
<div class="flex-x-xl-center"></div>
<div class="flex-xl-left"></div>
<div class="flex-xl-right"></div>
<div class="flex-xl-between"></div>
<div class="flex-xl-around"></div>
<div class="flex-xl-top"></div>
<div class="flex-xl-bottom"></div>
<div class="flex-xl-baseline"></div>
<div class="flex-xl-stretch"></div>