What is Flexbox?
Flexbox, shortly, stands for Flexible Box Layout. If CSS is not completely unknown to you, you’ve met it for sure. It’s the magic that lets you create boxes (divs) that align and behave in a certain way with a single or a few CSS rules. So instead of breaking sweat around complicated solutions with Javascript, you use display: flex; and specify the box’s behavior. That is, you specify the behavior of elements within that box, like columns, other divs, whatever.
Divi 4 did not support Flexbox by design. If you wanted to use it, there was some CSS to do. So? I’m happy!
Table of Contents
About Flexbox
Flexbox is not a single CSS property, but rather a complete module. It involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
While “regular” (or normal) layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”. Have a look at this figure from the specification, explaining the main idea behind the flex layout.
When used, items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
- main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the
flex-directionproperty (see below). - main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end.
- main size – 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 axis – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
- 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.
- cross size – 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.
Source: CSS Tricks
Flexbox examples
If you’ve ever tried to lay out something inside a row and then wanted to display it in a certain way (alignment, order, etc), you’ve had either the option to play with Javascript or use explicit CSS rules on a module.
For example, take a row with 4 columns. Inside the columns, you have placed simple images. But since they’re different in sizes, how do you align everything so the columns are aligned in a certain order, maybe in the center of the row, with equal spacing around them?
It sound terrifying, and it is – some time ago, if a customer approached with such a demand, it meant a lot of fiddling around with JS. But hey, CSS works.
In Divi, it was usually done via the Visual Builder; you’d go to the Advanced tab and under Custom CSS you’d write something like:
display: flex;
flex-direction: row;
justify-content: space-evenly;This would give you the result as seen here:
You’ll notice that the spacing around the items is equal, no matter what the overall width of the parent is. Magic? Almost.
Of course, this is just one of the spacing supported.
But that’s not really the point of this post.
The point of this post is that Divi 5 Public Alpha 18.3 supports custom layouts and Flexbox by design!
Divi 5 Flexbox
Yes, Divi 5 now supports Flexbox right inside the Visual builder. This means one can create more and more designs without touching the code or CSS at all. Got it? Read again. I’m so happy.
Here’s what Nich announced in his video about this.
Divi 5 Flexbox – Conclusion
I’m thrilled and have already started playing with it. The problem is there’s so much going on with Divi 5 that I actually can’t keep up. 🙂 And you know what? I love it – because it means development is fast and steady, and all the rest is my problem. I’m in a situation where I’m still testing the nested rows, but now I can do it from the start, using Flexbox layouts. And I’m still happy and full of plans where to use it on my old sites, not to mention ideas about new designs.
All in all, it looks like a decent number of code modules will be gone from my layouts, as well as a number of separate CSS rules on modules and items. Very nice, let’s see how it works in real life.
