Flexbox for forms

Say you wanted to have two form elements side by side, except one of the elements fills the “empty” space.

The text input fills the available horizontal space, and the button sits on the right comfortably; Traditionally, you’d use floats, or display: inline-block, but in both situations you’d have to manually set the width on both elements.

This is the perfect opportunity to employ a lil’ bit o flex-box. Starting with some simple markup, we’re going to sprinkle a couple of classes through the markup, pay attention to the .form__object--fillspace & .form__object--fillspace-gap classes.

From here, SASS nestings take care of keeping these two classes together, where they make sense:

Boom, form markup and styles, easier than ever. The input and button take up the full width of the parent. No inline-block, no floats, no hard-set widths.

Bonus: Accidental bug hunting

Now, Today I accidentally discovered a bug with Chrome, flexbox and <fieldset> — It turns out that you can’t change the display property of a <fieldset>. Don’t use a fieldset.

Happy boxin’

You’ve been reading something by Ben Schwarz.
Just another independent web dude.

Did you enjoy that? You’d better follow me on Twitter, or follow this blog on Tumblr.