Flexbox 101

What is Flexbox?

What we have made is a CSS (and SASS file) that makes every Flexbox attribute available at every media size to use in HTML. The idea is that you can flex display a series of divs, and change the CSS at different media sizes as you see fit without accessing the CSS.

An example:

<div class="fx-sm-flex-display fx-md-align-content-center fx-sm-align-content-flex-start">

<div class="inner-div-1"></div>

<div class="inner-div-2"></div>

<div class="inner-div-2"></div>

</div>

The above example will add flex-display: flex (with all necessary browser specific prefixes) to the top div element to all screen sizes ABOVE 544px (defined by “-sm” in the SASS file). That means when you get to mobile size, the div will return to its default CSS.

The div will use the flexbox attribute align-content: center (plus all prefixes) to anything above 768px (defined by “fx-md-align-content-center”). Once under 768px, it will resume the align-content: flex-start (defined by “fx-sm-align-content-flex-start”) until 544px, at which point it will return to default CSS. As you can see, it can save you a lot of time in writing specific lines in CSS over and over to achieve the same result.

Extras:

If you open the SASS file, you will see we have made the file so you can edit, add, or remove media queries, as well as setting a custom prefix to all CSS classes if you run into conflicts.

Hope you enjoy!

[bs_button size=”md” type=”default” value=”Download the ZIP (CSS & SASS)” href=”https://flexboxhelperclasses.gregdorrian.com.au/flexbox-helper-classes.zip”]

[bs_button size=”md” type=”default” value=”Download from Github” href=”https://github.com/gd-dorrian/flexboxhelperclasses”]