Switching from Floats to Flexbox

In GeneratePress 3.0, we introduced a new flexbox layout option, which basically changes the entire foundation that your website is built on.

It’s lighter, easier to customize, and all around a lot better!

However, if you’re thinking of changing your site from Floats to Flexbox in the Customizer, there are some things to keep in mind, and some things you may need to adjust, depending on how much you’ve customized your site.

Box-Sizing

The number one thing you might notice is your website will reduce in width a bit. This is because the flexbox version uses something called box-sizing throughout your site, which means things like padding and border are included in your container width.

For example, if your Container Width is set to 1300px and your content padding is set to 40px left and right, the floats version will display your Container Width as 1300 + 40 + 40 = 1380px.

In the flexbox version, the padding is included in the Container Width, so it will display at the 1300 that you set.

Unsemantic Grid Utility Classes

The flex version no longer includes Unsemantic Grid, so if you’re using their classes in your content (grid-50, grid-25, etc..) they will no longer work.

menu-item-float-right

In the float version, we have this utility class you may be using to move menu items to the far right of your navigation.

In the flex version, this class no longer exists. Instead, you should use the [insert link here] generate_menu_bar_items hook to add “menu items” that don’t belong next to the real menu items.

This new method is way more flexible, and will even display those items in the mobile bar instead of inside the toggled mobile menu.

Footer Widget Widths

In the floats version, you may be using some CSS (or filters) to resize some of your individual footer widgets.

For example:

.footer-widgets .footer-widget-1 {
    width: 56%;
}

.footer-widgets .footer-widget-2 {
    width: 22%;
}

.footer-widgets .footer-widget-3 {
    width: 22%;
}

This code will no longer work in the flexbox version, as it uses automatic sizing to size the individual footer widgets.

So instead of the above, you would do this:

 .footer-widgets .footer-widget-1 {
    flex-basis: 56%;
}

.footer-widgets .footer-widget-2 {
    flex-basis: 22%;
}

.footer-widgets .footer-widget-3 {
    flex-basis: 22%;
}

That will give you the same result as your old width CSS.

Top Bar & Footer Bar

In the floats version, the top and footer bars used floats to build the overall layout of the inner widgets. It’s worth checking to see if the order of these widgets changes at all in the flex version, especially on mobile.

The flex version handles these widget areas much better, but it may require you to re-order a couple of widgets.