Flexbox

Flexbox: Styling Top Row Items in Scalable Columns

Touching again on the complexity of making flex-box columns scalable; this time I focus on one of the design challenges with this layout. When child items are burdened with the limits of CSS, sometimes the solution is to think outside of the box, literally, and work with the parent instead.

Background: the Design

I love Flexbox--it's a fundamental in responsive design. As empowering a device as it is, though, it's not without it's limits. It just so happens that I work with a designer who has a real knack for exposing these limits. The minute I think I've got flexbox under control, she'll throw me a design that challenges my every conception of what flexbox is or how it should work. Let's look at a specific point and case--a design I was recently asked to build out:

Tags

CSS & Javascript: Flexbox Columns that Grow with Content

I've had a long standing problem with flexbox--particularly with flexbox columns. The proverbial Elephant in the Room has always been this: a mechanism for automatically letting content grow in one column (i.e., adding consecutive child items) and then overflow into the next doesn't really exist. Today, I look at a fix for this problem--and, all it takes is a little JavaScript.

Outlining the Problem

Let's look at flexbox columns and see what's at stake.

Tags

Subscribe to Flexbox