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.
<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.
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”]