Faking Flexbox — Floatless Galleries
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
Thankfully, there’s another quick-solve for those obnoxious galleries, content-tiles, and trading-card page structures.
When I first used to the
text-alignproperty, 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:
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.)
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
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
AND there’s no need for
:nth-child selectors to get the far-left/right tiles to align, either.