Flexbox Responsive Helper Classes

How it works

This requires the an understanding of flexbox works.

I have taken the smarts used in responsive grids (like Bootstrap) and applied it to css classes for CSS3 Flexbox, the idea is when you are in rapid development, you can attribute these classes on divs off you go - in particular this is helpful when you get to responsive flexbox queries as you may to change the column direction at a certain size or remove the flexbox all together.

Just assign the classes you want and you don’t have to worry about CSS.

See it in action

In my HTML I will write

<div class="fx-md-display"> Inner Content Here </div>

You can see the associated media query to make sure it doesn't affect the divs with classes under md (in my case - sm and xs) plus all the necessary prefixes for browser support.

See all classes for a list of classes you can use


                          @media (min-width: 768px) { 

                          .fx-md-display {

                          display: -webkit-flex;

                          display: -moz-flex;

                          display: -ms-flexbox;

                          display: -ms-flex;

                          display: flex;

                          } };

Variables

This section applies to the SaSS file.

Prefix

At the top of the SaSS file you will see the prefix attribute used at the beginning of all classes.


                          // Set a prefix 

                          $main-prefix: "fx-";

Media break points

You can define all your media break points you’d like to have, total control over custom media size queries. Keep in reverse order to maintain mobile first.

All that happens is a loop through all media query appending the label to the media query size.


                          // Reverse order because mobile first. 


                          $media-sizes: ( 

                          "xl" : "min-width: 1200px",

                          "lg" : "min-width: 992px",

                          "md" : "min-width: 768px",

                          "sm" : "min-width: 544px",

                          "label" : "value-here",

                          );

All Classes

This section applies to the SaSS file.
In these examples my prefix is set to “fx-” and I will target “md” sizes.

// Flex Display

.fx-md-display
.fx-md-display-inline

// Flex Direction

.fx-md-direction
.fx-md-direction-reverse
.fx-md-direction-column
.fx-md-direction-column-reverse

// Flex Wrap

.fx-md-wrap
.fx-md-wrap-nowrap
.fx-md-wrap-reverse

// Justify Content

.fx-md-justify-flex-start
.fx-md-justify-flex-end
.fx-md-justify-center
.fx-md-justify-space-between
.fx-md-justify-space-around

// Align Content

.fx-md-align-content-flex-start
.fx-md-align-content-flex-end
.fx-md-align-content-center
.fx-md-align-content-space-between
.fx-md-align-content-space-around
.fx-md-align-content-stretch

// Align Items

.fx-md-align-items-flex-start
.fx-md-align-items-flex-end
.fx-md-align-items-center
.fx-md-align-items-baseline
.fx-md-align-items-stretch

// Align Self

.fx-md-align-self-flex-start
.fx-md-align-self-flex-end
.fx-md-align-self-center
.fx-md-align-self-baseline
.fx-md-align-self-stretch

// Flex order

.fx-md-order-0
.fx-md-order-1
.fx-md-order-2

-- Continues to .fx-md-order-10 or you can set the variable in the Sass file.

// Flex Grow

.fx-md-grow-0
.fx-md-grow-1
.fx-md-grow-2

-- Continues to .fx-md-grow-10 or you can set the variable in the Sass file.

// Flex Shrink

.fx-md-shrink-0
.fx-md-shrink-1
.fx-md-shrink-2

Responsive flexbox Helper Css