Flex Your Box

If you have read any of my previous articles, you may have noticed by now that I tend to write about things that I am finally getting around to learning or that I have put off doing so in the past for one reason or another. Whether it is something I didn’t think I needed, or it is a new technology that may not quite be ready for production. A good case in point, and certainly long over due, is the elusive flexbox layout mode for HTML 5. Flexbox has been around a pretty long time now, in terms of time in the software world, but due to lack of support in older web browsers it has been sort of like one of those 4-letter bad words that we all love to use but know we shouldn’t. In this article I will be showcasing some, but not all, of the power features in the flexbox layout mode. As well as some do’s and don’ts in case you are hoping to quote: “go ham” with flexboxes on your next project. Let’s get started.

Flexbox 101:

I feel I should first point out that flexbox should not be used for any and everything under the rainbow. And it does not serve to replace the grid system of your choice CSS framework. The manner in which HTML renders flexbox elements may actually limit your ability to control certain aspects of an element such as the float parameter, as well as the position parameter.

A common and simple example use case for flexbox. Thumbnails. Let’s first setup a simple html document with a container div and a few thumbnail items. You might notice the style.css attached in the heading, we will set that up next.

Follow along with this Codepen https://codepen.io/philsanders/pen/aNWdbQ

Now for that style.css document. We’ll setup the container and thumbnail classes with some basic flexbox controls.

.container {
    display: flex;
    flex-flow: row wrap;
}

.thumbnail {
    display: flex;
}

The core of flexbox is controlled by the display property. Looking above you can see that we have the display property set to “flex”. Followed by the flex-flow property, which determines the flexbox content direction, as well as whether or not to allow content wrapping. Alternatively these parameters could be set with flex-direction and flex-wrap properties respectively.

Next we define the thumbnail class to be a flexbox element by setting its’ display property to “flex” as well. This causes the element to wrap tightly around its’ child element(s).

Feel the Flex:

Now let’s try something a little more exciting. We are going to make our thumbnails responsive and show off a little more flexibility. We do this by adding the justify-content parameter and setting it to “space-around” within our container class. This tells the flexbox child (thumbnail) items to distribute the space between and around them. We then add the align-items parameter and set it to “stretch”. Lastly give the child items a width of, let’s say, 25%.

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
}

.thumbnail {
    display: flex;
    width: 25%;
}

To make our images responsive we will give them a width of 100% and set the height to “auto”.

img {
    width: 100%;
}

You should now be starting to see the power of flexboxes and how you might use them in your next project. Just remember to be aware of browser limitations and what your target market is. And as always I encourage you to look up the full list of parameters, as there are far more than I have touched on so far.