Faking Flexbox — Floatless Galleries

Who’s with me?
Times are a-changin’, and web developers have their eyes on a sustainable, modular, universally hackless future.

It’s been almost a decade since the first working draft of Flexbox was released, and the debate surrounding best-practices for layouts has only grown more heated. Just slugging ‘flexbox layout’ into Google yields a plethora of articles, some informative — but mostly controversial. A number of headlines question if CSS even has a place in web development anymore, weighing it’s usefulness against the React library, as the latter matures into a powerful framework for native apps.


At the moment though, it still feels as though developers have to make a choice between working with clunky floats, or the more modern appeal of display: flex.

Thankfully, there’s another quick-solve for those obnoxious galleries, content-tiles, and trading-card page structures.

When I first used to the text-align property, I didn’t give any thought to it’s potential for layouts.

I’m not ashamed to admit that either — just like floats, I’m talking about a framework solution that uses a property in a totally different way than it’s intended purpose.

I imagine it also has a lot to do with the disconnect that new developers seem to have (or I had, at least) between the styles generally used on blocks of content, and the content itself. I spent an embarrassing amount of time trying to make my CSS work without changing display properties at all.

That concept is not so. Check out the following:

See how the spacing of the last line isn’t the same as the rest? Make note of this.

Now, I’m sure you’re getting a sense of where I’m going with this, so keep thinking, and let’s explore where text-align: justify can get us, in the realm of page layouts.


There’s one step between you and a flexible, fully supported gallery, sporting automatic margins, just like our precious Flexbox.

Go right ahead, throw display: inline-block on your gallery tiles’ class.

(You’ve already got your percentage widths set, right? Great. You’ll also want to manage your spacing with padding, according to border-box.)

Next, add text-align: justify and watch as the tiles fall into line together.

Now, to cover our tracks, we’ve got just a couple quick-fixes to add. Scroll back up if you need to, and notice how the last line of a justified parent isn’t properly spaced? In print, the last line of a paragraph isn’t justified. To get around this, we need to add an empty :after pseudo element to our parent. Make certain you’ve declared content: “”; as well as display: inline-block, a width of your choosing (100% will suit us fine) and height: 0.


Great!

Now, it has to be said that this method isn’t without drawbacks — the main issue being a lack of fluidity as page size scales, but it’s a damn sight better than working with a clearfix, floating children and accounting for margins with calc() values.

AND there’s no need for :nth-child selectors to get the far-left/right tiles to align, either.