Learn Flexbox Visually In The WordPress Editor Using Flexblocks

This Tutorial Uses Flexblocks By Cabezi Which Can Be Downloaded Here

Since its introduction in 2009, the Flexbox layout system has taken web development by storm. Gone are the days of not being able to center a piece of content and all the other wonky hacks that existed in the pre-flexbox era.

For the uninitiated, flexbox is a CSS layout system introduced to help web developers create responsive layouts that adapt to a variety of viewport sizes. Flexbox is easy to learn, and knowing the basics of flexbox can open up a world of possibilities, allowing for the implementation of nearly any design imaginable.

This tutorial is different than most other flexbox tutorials out there. Rather than editing code directly in a text editor, you’ll be working with a powerful WordPress plugin called Flexblocks. Flexblocks is a no-code flexbox layout tool designed to enable complex designs right from the Block Editor.

Flexblocks isn’t the only “Flexbox in WordPress” solution out there, but in my opinion it is the best due to its flexibility, range of options, and some nifty extra features. Throughout this tutorial I’ll provide links to the MDN Web Docs for more exhaustive explanations of each property discussed.

Getting Started – Basic Development Environment Setup

The only pre-requisite for this tutorial is a WordPress install to play around with. I’ll be using a local WordPress server created with “Local By Flywheel”, but other local development options including XAMPP, WAMP, MAMP, and Vagrant will work just as well. Local development environment setup is beyond the scope of this tutorial, but a simple google search should get you up and running.

Once your WordPress server is live you’ll need to download and install the Flexblocks plugin. The Flexblocks plugin can be found here (both free and pro versions). For this tutorial we’ll be installing the free version. You can verify Flexblocks has been successfully installed by adding a new post or page and opening the WordPress block browser. There should be two new blocks listed under “Flexblocks by Cabezi.com”, the Flexblocks Container Block and The Flexblocks Item Block.

Flexbox Basics – Flex Containers and Items, Flex Direction, Justify Content, and Align Items

When thinking about Flexbox, everything boils down to containers and items. A flexbox container is nothing more than a box (or div in html parlance) that contains one or more flexbox items. Flexbox items in a container can themselves contain flexbox items making them both a flexbox container and a flexbox item at the same time.

In the context of the Flexblocks plugin the Container is mostly meant to be used as a top level block with various Flexblocks items inside (although this doesn’t have to be the case). The most important property of a Flexblocks container is Flex Direction. Flex Direction determines how items within the container behave. Items can be a Flexblocks Item, but can also be any other WordPress block including Paragraph, Heading, Image, etc.

All of this may seem a bit confusing if you’re new to Flexbox, so let’s start the tutorial by creating a Flexblocks Container. Now that our container is created, lets add some items by clicking the “Plus” button inside of our Flexblocks container. For this tutorial we’ll add a paragraph block to each container so we can tell them apart. We’ll also add a border so we can visualize the dimensions of each item. To save time we can copy the first block, and then paste copies of that block into the container. From there we just need to edit the text inside each of the items so we can differentiate the child items.

You’ll notice that the items are arranged in a row from left to right with no space between the individual blocks. This is because the default flex direction property of the container is “row”, the justify content property is “normal”, and the align-items property is “normal”.

What Is Flex-Direction?

Flex Direction refers to how items within a flexbox container are arranged. Options for flex direction include “row”, “column”, “row-reverse”, and “column-reverse”. Let’s see how these properties affect our layout. If you’re following along, these properties can be found under the “Flex Options” tab of the Container block under the “FLEX DIRECTION” field. I’ve added a dashed border around the Flexblocks container as well as some padding inside the Flexblocks items for clarity.

Flex-Direction: Row

Items are aligned with the start of the container and move from left to right.

Flex-Direction: Row-Reverse

The start of the container is now its right edge and items move from right to left.

Flex-Direction: Column

Items are now stacked and in order from top to bottom.

Flex-Direction: Column-Reverse

Items are again stacked but this time the order is reversed.

As you can see, Flex Direction can be a very powerful tool for laying out content, but what if we want to distribute it differently? This is where the Justify Content and Align Items properties can come in handy. Let’s start with the Justify Content property and see how it affects layout.

Flexbox Property – Justify Content

The Justify Content property determines how content is distributed along its main axis, left to right for containers with flex direction of row (or row reverse) and up and down for containers with flex direction of column (or column reverse). This concept is easier to understand visually so once again lets tweak some settings and see what happens. The Justify Content setting can be found in the “Flex Options” tab of the container block. We won’t go through every permutation, just the most interesting cases. All of the examples below are with flex direction of row, but the same principles would apply if the flex-direction was column.

Justify-Content: Center

All items are smooshed together and centered.

Justify-Content: Flex-End

All items are smooshed together toward the end of the flexbox container.

Justify-Content: Space-Between

Items are distributed evenly with no empty space at the start or end of the flexbox container.

Justify-Content: Space-Around

An equal amount of empty space surrounds each block. Blocks in the middle appear further apart due to additive empty space from adjacent blocks.

Pretty cool eh? Flexbox has provided us a way to space items pretty much however we want inside of a flexbox container. Other useful values are “space-evenly” and “stretch”. Feel free to try out the various options on your own and see what happens. In our simple example alignment doesn’t matter too much due to the fact that all of the items are of the same width and height, but what if they weren’t? That’s where the Align Items property comes into play. For this part of the tutorial I’m going to set the min-height property of each of the child items to something different. The min-height property for each item can be changed from each item’s “Dimensions” tab.

Flexbox Property – Align Items

So I’ve set different heights for each of our Flexblocks item blocks, now let’s see how the Align Items property affects our layouts. In the following examples I’ll keep flex direction as row, but the same principles apply to a container with flex direction of column. For consistency I’ll set the justify content property to “space-evenly”.

Align-Items: Flex-Start

Each item is aligned to the start of the container block.

Align-Items: Flex-End

Each item is aligned to the end of the container block.

Align-Items: Center

Items are aligned around the center of the container block.

Align-Items: Stretch

Items are all stretched to fill the entire container block.

Responsive Layouts With The Flex Wrap Property

So now we know how to arrange flexbox items within a container, but what happens when the container is smaller than the items it contains? The Flex Wrap property controls what happens when a parent container cannot contain its child items. This is usually more of an issue for containers with “row” flex direction since containers are often constrained by the width of the viewport and side to side scrolling or content spilling off the screen is usually considered suboptimal behavior. Flex Wrap is less of a concern when we work with “column” flex direction since typically a web page has unlimited top to bottom scrolling space.

In order to demonstrate the Flex Wrap property we’ll stay with our same container but this time give each flex item a defined minimum width. Let’s see what happens when we shrink the viewport (thus shrinking the container) with various values for Flex Wrap. Flex Wrap settings can be found under the “Flex Options” tab for the container block. For this demonstration I’ve set Justify Content and Align Items both to “flex-start”.

Flex-Wrap: No-Wrap

With the flex-wrap property set to no-wrap the items spill outside of the container.

Flex-Wrap: Wrap

With flex-wrap set to “wrap” we nicely wrap items as needed.

Flex-Wrap: Wrap-Reverse

Similar to setting the flex-wrap value to “wrap” except items are stacked from bottom to top with the first item at the bottom.

Flexbox Item Sizing – Flex Basis, Flex Grow, and Flex Shrink

In our earlier examples we manipulated item width and height via the min-width and min-height properties. This is a total valid way to size items in flexbox, but there are other methods we can also take advantage of. In the next section of this tutorial we’ll explore the Flex Basis, Flex Grow, and Flex Shrink properties, and how we can use them to create more responsive layouts.

Flexbox Property – Flex Basis

In simplified terms, you can think of the Flex Basis property as the size a flexbox item wants to maintain along its major axis. This means that Flex Basis controls item width when Flex Direction is “row” (or row-reverse), and it controls item height when Flex Direction is “column” (or column-reverse).

Flex basis works with in conjunction with the Flex Grow and Flex Shrink properties. The Flex Grow and Flex Shrink properties can be any positive number or 0 and can be thought of as being a component of a ratio. In other words, an item with a Flex Grow value of 2 will grow twice as large as an item with a Flex Grow value of 1. Alternately an item with a Flex Shrink value of 3 will shrink three times smaller than an item with a Flex Shrink value of 1. Flex basis also determines how, and when, a flexbox item will wrap if Flex Wrap is enabled. When the item in question cannot fit in its container and still maintain its Flex Basis, the item will wrap. If Flex Shrink is set to 0 the item will not shrink and if Flex Grow is set to 0 the item will not grow.

Again this may seem confusing so lets go back to the Block Editor and play around with some values. If you’re following along, the Flex Basis, Flex Grow, and Flex Shrink values can be set via the “Dimensions” tab of any Flexblocks Item.

A Visual Example Of Flex Basis, Flex Grow, and Flex Shrink with No Flex-Wrap

In this case each Flexblocks Item has a Flex Basis of 150px, and each item has a Flex Shrink value of 1 and each item has a Flex Grow value of 1 except Item #2, which has a Flex Grow value of 3. Notice what happens as the viewport changes size.

A Visual Example Of Flex Basis, Flex Grow, and Flex Shrink with Flex-Wrap

Lets look at the same example but turn on Flex Wrap in the parent container. Notice when the items shrink to approach their Flex Basis of 150px the wrapping begins. Also notice that Item #2 maintains a larger width even after wrapping due to its Flex Grow property being set higher than its siblings.

One Last Thing – Mind The Gap

There is one more property that can be extremely useful when designing layouts with Flexbox, and that is the Gap property. The Gap property controls how much of a gap should exist between flexbox items. This property can useful in cases where flexbox items are allowed to grow, but you don’t want them to grow into each other and actually touch. Gap applies to both row and column Flex Direction, but it should be noted that Gap does not apply to the space between an item and the edge of its parent container. Gap is one of the simplest flexbox concepts to understand, but lets take a quick example using the previously created layout with a gap set to 20px. If you are following along, the Gap setting can be found under the “Dimensions” tab of any Flexblocks Container or Item.

Conclusion

Well there you have it. If you made it to the end of this tutorial, I hope you can see how powerful flexbox can be when designing layouts in the WordPress Block Editor. The nice part about using Flexblocks as a flexbox layout tool is that you can see the results of changing various settings instantly in the Block Editor, and on the WordPress preview screen.

And now for the shameless plug. If you have enjoyed the free version of Flexblocks, I encourage you to give the Pro Version a try. It includes 6 additional blocks that transform Flexblocks into a fully fledged page builder, where you can accomplish just about anything. Flexblocks Pro also includes support for reveal animations on a per block basis, which allows for synchronized transitions with settings for transition delay and transition length.

There are a plethora of other settings that I haven’t mentioned in this tutorial. These settings aren’t necessarily specific to flexbox and include margin, padding, rotate, overflow, position, box shadow, and drop shadow. I plan on exploring these settings further while offering “recipes” for different types of useful blocks that can be used on your own personal and client websites.

Learn Flexbox Visually In The WordPress Block Editor With Flexblocks