Content Layout with Flexbox

Component architecture is a great way to approach front end development. Making your components render in isolation allows them to be a lot more malleable when they are used in your wider application.

Layout gives you a means to control some of that malleability and I wanted to talk about a layout approach I have begun to use recently. The approach I take involves using flexbox.

Some flexbox grid examples I have seen recreate more rigid grid systems that have come before that used floats or display inline block. I feel that these implementations are missing the point of flexbox since flexbox is great for controlling the fluidity of content. It can allow and disallow for the growing and shrinking of content as well as reordering and positioning too.

First I would like to take a moment to explain how I currently approach developing components. Unless a component’s design states that its width should only be as wide as its content, I’ll set the component’s width to be 100%. The reason for this is so it’s width can then be contained by its parent.

fig. 1 — A collection of elements that have full and content based widths.

Toggable above acts as an inline element and so it would not make sense to have its width set to 100%. The input field’s width however should be defined by the form it’s within hence the full width.

When you’re unsure about whether your component should act as an inline or block element I suggest creating a modifier class that will set the width to be 100%. (fig. 1)

So now that we have our components defined, built and they’re documented in a pattern library, we can then begin to start to focus on the layout.

fig. 2 — The elements we previously defined being displayed within our layout.

There isn’t anything complicated happening here, but we’re not looking for complexity — we’re looking for structure. We’ve defined a single row with three columns, two columns with three rows each, a single row with a single column and lastly a single row with two columns.

fig. 3 — Scss implementation used for layout
fig. 4 — A HTML example of how the container styling can be used

So let’s take a look at what this could look like in Scss (fig 3), but I’ll only be focusing on the Scss that’s needed for structure since the styles that are needed for the form itself could be anything you like.

We define .container{} using flexbox and we add some guttering. We then have an element class that defines some guttering but also sets the possible widths of our spans.

On small screens, each span will be 100% the width of their container. Once we get to a larger screen we can then use flex: 1 0 0%; to offer equal spacing based on the amount of columns in the span.

Lets take a moment to explain a little about flex: 1 0 100%; and flex: 1 0 0%; The first number is flex-grow which tells the container span that it should take up any available space. The second is flex-shrink. We don’t want our container spans to get smaller than they should so it’s to 0. The final percentage value is flex-basis. Setting flex-basis to 0% we’ll get equal width for each of our container spans, which is a handy trick.

In the Scss above I have some comments that went something like ‘modifiers go here’ and I want to introduce some modifiers that I have found useful as an example of what you might wish to add to your own version of this layout system. My advice however would be not to use too many modifiers.

First up is .container__span — break-in-half{} which will make the content split on small screen devices rather than the default behaviour of having every container span become their own row.

.container__span — fit-to-content{} forces the span to be the width of its contents rather than an equal amount of space split between columns. Lastly we have a positioning modifier, .container__span — to-end{} which will move the column to the right.

fig 5. — A few examples of modifiers

I don’t consider this to be a silver bullet layout solution but by keeping it lightweight it should complement a more rigid layout solution using CSS Grids (an upcoming CSS feature) or something a little more old fashioned like Bootstrap’s grid system, which relies heavily on row and column classes.

A grid is great for overall structure of an app when certain portions of the layout need to be strictly controlled but a more flexible system is equally great for the content since content is far more fluid and you have less control over the size of content on given screens.

So why not go ahead and use the best of both and let me know your thoughts and whether you have any improvements. Thank you.

Further reading

I hope you found this article useful. If you feel like I have missed something important, have something to add, or feedback in general please don’t hesitate to contact me via Twitter or leave a reply here. Thank you! — Adam Johnston