Understanding CSS3 Flexbox for Responsive WordPress Design

Oh man, remember how hard it used to be to vertically center content on your site? If you’re struggling with the words “used to be” in that last sentence, you obviously haven’t yet cottoned onto flexbox.

CSS wasn’t originally designed to handle the complex template styling that we see on the web these days, forcing developers to come up with CSS hacks to get content looking right.

Flexbox, or flexible boxes, is a relatively new layout module in CSS3 designed to improve item alignment, direction and order in a container even when it’s dynamic or of an unknown size. It’s most important feature is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

In this post, I’ll walk you through how flexbox works and how to add it to your WordPress stylesheet so your website is up-to-date with the latest CSS standards.

Continue reading, or jump ahead using these links:

• What is Flexbox?
• When to Use Flexbox for Your Layout
• Containers, Children, and Flex
• Building a Container with HTML5
• Creating and Styling Your Flexbox
• Styling for Responsiveness

What is Flexbox?

Flexbox is one of the first modules designed for actual layout and makes styling with CSS easier and, in some cases, actually possible.

The module designed to enhance the CSS box model by allowing containers and their contents to be flexible. Using flexbox, a container and its children can be arranged in any direction: Left, right and even up or down. You can choose the order of elements on the page and reorder them, align your content from right to left with a single property, or even add any number of columns to your page. Size is also flexible since elements can grow to occupy unused space or shrink to prevent overflow.

The cool thing is that even though flexbox isn’t yet officially a part of CSS3, all major browsers support it including Android and iOS.

When to Use Flexbox for Your Layout

I recently wrote about grid layouts, a similar improvement to CSS also designed for better layouts. There’s a subtle difference between the two which makes one suitable for creating complete layouts and the other not so much.

While flexbox is technically capable of creating a full layout for your theme, it’s not designed exclusively for this purpose. Rather, it’s better suited for styling separate containers such as your main content area, sidebar, header and other similar sections. Grids are ideally used for creating an entire layout.

The difference lies in the way flexbox inherently interacts with major browsers that load progressively. The content that shows up first gets stretched horizontally to fit the entire screen. As more containers load, the full-width horizontal display adjusts and shrinks to include the surrounding elements.

As developer advocate for Chrome Jake Archibald notes in his article Don’t Use Flexbox for Overall Page Layout, what an end user sees is a sudden jump of the layout from content appearing as full-width to the actual size, which may be a lot smaller. While this is only a concern for users with slower internet connections, it still poses a problem for user experience. With this in mind, you don’t need to choose between the two –  use grids for layouts and flexbox for content within that layout.

Containers, Children, and Flex

Before you start coding your first flexbox, there are some important concepts that you need to understand first. According to the W3C’s CSS Flexible latest working draft:

• flexbox – A container becomes a flexbox after you include the display property and set it to flex or inline-flex
• flex item – A child element within a flexbox
• main axis / main dimension – The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension
• cross axis / cross dimension – The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension
• main-start / main-end – The flex items are placed within the container starting on the main-start side and going toward the main-end side
• cross-start / cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side
• main size / main size property – A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the width or height property, whichever is in the main dimension.
• cross size / cross size property – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.

There are also certain properties in CSS that don’t have an effect on flexboxes since they aren’t actually block containers:

• column-*
• float
• clear
• vertical-align
• ::first-line and ::first-letter pseudo elements

Building a Container with HTML5

With that all out of the way, you can now start building your flexbox. To do this, you first need to add some HTML5 to the WordPress page of your choice, whether it’s header.php, archive.php, page.php or whatever file ends up being seen by your visitors on the front end.

Create a div and a recognizable ID for it based on your needs, similar to the example below:

Within that container, you can add whatever content you want.

I’m going to build a custom homepage with a large area at the top for a call to action, three smaller sections underneath in separate columns where I’ll place prompts and another section below it for additional information.

To accomplish this, I’ll add the code below into my otherwise completed index.php file and I’ll also add the div I included above.

When you have added your main div and all the other content you wish to include, you have the foundation you need to build your first flexbox. To accomplish this, you need – as you probably already guessed – some CSS.

Creating and Styling Your Flexbox

To create your flexbox, you need to define the display property for your container. It should look similar to the example below:

This creates your flexbox at block-level. Alternatively, if you wanted to apply styles inline, you would type inline-flex instead of flex.

Now you’re free to add the styling for your flex items below your new flexbox you just created.

Though you have just made your first flexbox, you haven’t yet added any flexbox-related properties to really see how much you can do with it. For example, you can use flexbox to help keep your content responsive so it views well across all devices.

Styling for Responsiveness

There are many properties you can include in your flexbox and to help create a page that’s responsive, you can order your flex items.

To place your flex items in an order of your choosing, all you need is the order and shorthand flex property.

While there are a number of properties you can use to adjust your content such as the flex-basis, flex-grow and flex-shrink properties, the W3C recommends that you use shorthand and this comes in the form of a single property called flex.

Here’s an example of what these properties look like in action with the homepage I’m creating:

I know, seems fine, but what does this all mean, right? It may seem a little tough to follow at first, but it’s not too difficult to understand once you get the hang of it.

The order property simply needs a number to tell your browser which flex item to display before the others. Starting from one, you can choose which flex item to show first. An order of 2 would display the flex item second, order:3; would display an item third and so on.

You can also use negative numbers. If you suddenly realize in editing that you need to add a flex item before the first one that’s already ordered, you can set the new flex item to order:-1; so it’s displayed before the first flex item. Handy, isn’t it?

The shorthand flex property is where things start looking a bit complicated. Fortunately, there’s a fairly straightforward explanation: This property sets the flexible sizing of a flex item relative to the total size of the flexbox.

Essentially, you can set the size of a flex item to scale based on the available space. This means that if a user visits your site on a mobile device, you can set your content to automatically shrink to fit the screen size or in the case of desktop browsers, your content can grow to fit the entire size of the window.

Not all of your flex items have to do this, though, since you can disable flexible sizing for flex items that need to stay a certain size. For example, you may want a small ad to remain the same size on all screens since your client may get upset if you’re charging the same price for truncated exposure on smaller screens.

So how can you make this happen? Here are the ins and outs of using flexible sizing with the shorthand flex property.

First off, it’s comprised of three values from their longhand property counterparts:

• flex-grow – Sets if and how big your flex item can scale to fit unoccupied space. It can only be a positive number.
• flex-shrink – You can let your flex item shrink if the item is larger than the screen size. Negative numbers don’t have an effect.
• flex-basis – The initial size of the flex item before any flexible sizes are applied and before there is free space to occupy or a lack of space. Can be set as pixels or a percent.

Once you know how the longhand properties work, you can start coding in shorthand:

• flex:initial or flex:0 1 auto – This setting makes the flex item size relative to the content that’s inside of it. It grows if there’s a lot of content and shrinks if there are only a few lines of text, for example. If there’s free space available, the item doesn’t grow to fit the whole area, but it is set to shrink if there’s a shortage of room.
• flex:auto or flex:1 1 auto – Either of these options lets your flex item shrink and grow as needed to fit any screen size where your page is viewed.
• flex:none or flex:0 0 auto – This disables flexible sizing and sets your flex item size to be fixed and non-adjustable to the end user viewing your site on any screen size.
• Relative flexible sizing with flex: 1 %px – The positive number you type first sets the portion of free space your flex item occupies relative to your other flex items if they use this same pattern. The second number lets the item shrink on smaller screens. The third value in either pixels or percent sets the initial size of the flex item, but keep in mind it also disables the flex-basis property which means this initial size isn’t guaranteed. If there’s enough space to display this initial sizing then it’s shown, but if there isn’t enough space, the exact sizing isn’t displayed. This is especially true if the item’s order appears lower in the list and other previous items in the order take up most of the space. An example of this option would be flex:2 1 0%.

For any of these options to work, you need to first set the size of your flexbox with a height and width. The size you choose completely depends on your specific needs.

Building upon the example stylesheet above, here’s what your flexbox CSS might look like with sizing added:

With this setup, all of the flex items in this example show up on the same line. Since I want to display a call to action, with extra prompts directly beneath it and additional information displaying last and on a new line, I need to add the flex-flow property and set it to wrap content in rows.

To accomplish this setup, I need to add this property to the flexbox and here’s what it looks like with the code I created for my homepage:

When one or more flex items occupy the length of the flexbox, the other flex items ordered after them are placed on a new row.

The basic structure is all set up now, but since I didn’t add any extra styling such as background colors, it won’t look like much when you view the page. To give you a better idea of what the final styling of my homepage should look like, I’ll add some extra optional and basic styling:

I also added paragraph tags to the HTML portion so that I could style the text:

Just remember that if you choose to include the min-width property with your flexbox or flex items, it could cause your flexbox to not work as expected and could override your flexbox settings.

The end result creates a very basic front page to be sure, but it sets the foundation. With a little bit of work and some more styling, you can create the responsive WordPress page and the site you desire.

Wrapping Up

The advancements to version three of CSS as of late brought the @media rule and other improvements which made modern, responsive layouts and themes that much easier to create. Now, with the proposed flexbox in draft, you can create modern designs without the use of CSS hacks for cleaner code that’s also much easier to write.

You now have all the tools you need to get started with flexbox right away, but there are so many more properties you can use to help achieve even more. Fortunately, you can access a complete list on the W3C’s working draft of flexbox.

Since there could still be changes that are applied to flexbox, it’s a good idea to keep an eye on the working document for flexbox to keep up-to-date on the latest developments.

If you want a fun way to help cement what you’ve learned in this post, I would highly recommend you check out Flexbox Froggy, a fun game designed to help you better understand how flexbox and its properties work.