Examples

Below are some examples of how to use ResponsiFlex to get the most out of it. Note that some padding has been added just to make everything nice and clear.

Basic 2-column layout

				<div class="boxcontainer">
					<div class="box six">
						I am a half-width box.
					</div>
					
					<div class="box six">
						&larr;- I'm with stupid.
					</div>
				</div>
			

Results in:

Nifty 3-column layout

				<div class="boxcontainer">
					<div class="box five">
						I'm with stupid &rarr;
					</div>
					
					<div class="box three">
						I'm stupid?
					</div>
					
					<div class="box four">
						&larr; I don't know either of these guys
					</div>
				</div>
			

Results in:

Centrally-aligned boxes

				<div class="boxcontainer aligncenter">
					<div class="box five">
						I'm in the centre!
					</div>
					
					<div class="box three">
						...budge over, dude.
					</div>
				</div>
			

Results in:

Right-aligned boxes

				<div class="boxcontainer alignright">
					<div class="box six">
						Let's go over here!
					</div>
					
					<div class="box two">
						Give me some space to breathe!
					</div>
				</div>
			

Results in:

Justified boxes

				<div class="boxcontainer justify">
					<div class="box two">
						Echo!
					</div>
					
					<div class="box two">
						...echo...
					</div>
					
					<div class="box two">
						...echo...
					</div>
				</div>
			

Results in:

Vertically-centred right-aligned boxes with no gutters

Now we've covered the basics, let's make it a bit more interesting:

				<div class="boxcontainer alignright alignmiddle nogutter">
					<div class="box six">
						My direct classes haven't changed AT ALL!
					</div>
					
					<div class="box two">
						Neither have mine, but you don't hear me bragging about it.
					</div>
					
					<div class="box four">
						Will you two PIPE DOWN?!
					</div>
				</div>
			

Results in:

One defined-width box & one to take up the rest

				<div class="boxcontainer">
					<div class="box four">
						One box to bind them...
					</div>
					
					<div class="box flex-stretch">
						AND ONE BOX TO RULE THEM ALL
					</div>
				</div>
			

Results in:

Boxes with child Flexbox containers

				<div class="boxcontainer">
					<div class="box eight">
						<div class="boxcontainer">
							<div class="box six">
								Boxes in boxes...
							</div>
							
							<div class="box six">
								...in boxes in boxes...
							</div>
						</div>
					</div>
				</div>
			

Results in:

Forced no wrapping or shrinking

				<div class="boxcontainer flex-nowrap">
					<div class="box four flex-noshrink">
						Hey, where are you going?
					</div>
					
					<div class="box twelve flex-noshrink">
						NOTHING CAN CONTAIN ME I AM A FREE SPIRIT I FLY WITH THE WIND AND THE TREES ARE LIKE MY ROOM-MATES
					</div>
				</div>
			

Results in:

Classes

This is not an exhaustive list of all classes, as you get most of it from the CSS itself, but a decent indication of what's possible with ResponsiFlex.

The Container

• .boxcontainer: The Flexbox column wrapper. All columns should go within here.
• .boxcontainer.columns: By default, boxcontainer will order its children left-to-right. Adding .columns will stack it's children top-to-bottom instead.
• .boxcontainer.align[center/right]: By default child boxes will be left-aligned. Adding .align[center/right] will change that. Note the difference between .aligncenter and .alignmiddle (below).
• .boxcontainer.justify: This will attempt to evenly distribute your child boxes across their container. Note that this only takes effect for any rows where there is space between the boxes to justify them.
• .boxcontainer.align[top/middle/bottom]: By default child boxes will be top-aligned. Adding .align[top/middle/bottom] will change that. Note the difference between .alignmiddle and .aligncenter (above).
• .boxcontainer.stretchheight: This will attempt to force all of its children to be the same height, regardless if whether any are shorter than the others. Works best for single rows of items.
• .flex-nowrap: By default, the boxcontainer is set to wrap its child items. Using this in combination with .flex-noshrink (see Child Boxes section) can force flexbox items to break out of their containers. Handy for things like slideshows & carousels.
• .boxcontainer.nogutter: By default there is a set gutter between each box (and the boxcontainer has a negative margin to account for that). .nogutter Removes any margins so all direct child items butt up to each other.
• .boxcontainer.mobileretainwidths: ResponsiFlex has a media query to set all child boxes to 100% width when the viewport is less than 48em (assumed 768px) wide. Using .mobileretainwidths will mean that child boxes will retain their responsive percentage widths even on narrow viewports (Note that you can change this media query condition yourself within the CSS if you want to change it).
• .mobile-boxcontainer: This is for a boxcontainer that will ONLY do its thing when the viewport is less than 48em wide (see above). Sometimes you might want your display elements to behave as normal in desktop view, but get some funky alignment going on in mobile - that's what this is for.

The Child Boxes

• .box: A child of .boxcontainer. A .box can be a set width (.one, .two, .three etc. up to .twelve) or given no defined width, in which case it will adjust according to its content.
• .box.[tenths/fifths]: A twelve-grid layout is neat and pretty much standard, but every so often you might want something that's exactly a fifth of the width, or even a tenth; In that case, .box.fifths or .box.tenths will give you perfect 20% or 10%-width boxes.
• .flex-grow: If you don't know exactly how much space there's going to be left in your container, but you want to take up whatever's left, then this is the class for you.
• .flex-stretch: Pretty much as above; the main difference is that .flex-glow specifically sets the flex-grow CSS property, .flex-stretch sets the flex shorthand flex: 1. Read more about it here.
• .flex-noshrink: Flexbox will try to be as accomodating as possible with your boxes. Using this will force boxes to never shrink below their defined width. Handy when used in conjunction with .flex-nowrap (see above in The Container).
• .flex-self-[top/middle/bottom]: You can align any child item to the top, middle or bottom of its container independent of the alignment of the other items or the parent.
• .box.mobile-width.mobile-[*]: You can define how a box spans its container specifically on narrow viewports using the .mobile-width class. For example, if you have four .box.three elements in a row, but instead of them all expanding to 100% on a narrow viewport, you want them to switch to 50% width (so you get a 2x2 grid), you can define them as <div class="box three mobile-width mobile-box-six">.

---

Notes

As with all things in life, there are some caveats and things to note with ResponsiFlex:

• The gutters are hard-coded in the CSS at 1.250rem (or 20px, assuming a root EM of 16px). If you want a different gutter, just search & replace 1.250rem in the CSS - it won't affect anything else. Could you convert it to SASS or LESS? Sure! Am I gonna? Nope!
• To account for the gutter spacing, the default .boxcontainer class has a negative margin. This shouldn't have any impact on any of your layout, and the negative margin is not in place when a boxcontainer is justified or has no gutter.
• To make sure everything works as expected (with the above point especially), boxcontainers and their children all have box-sizing: border-box; set.
• The 'mobile' media queries kick in at a width of 48em (768px assuming a room EM of 16px). If you want to change this, you can go right ahead and modify the CSS to suit your needs.
• The classes have been written to try and keep their CSS specificity as low as possible so that they can be easily overwritten, but obviously the more complex the rule (e.g. .mobile-boxcontainer > .mobile-box.nine, .boxcontainer > .box.mobile-width.mobile-nine), the more specific you might need to be to override it.