• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

flexbox justify content problem

Flexbox Justify-Content Doesn’t Work – Space Between or Space Around

December 2, 2018 by Pat Fortino

Flexbox is an amazing improvement to css web page layout and design. Unfortunately, sometimes Flexbox Justify-Content Doesn’t Work – Space Between or Space Around. For example, several times I’ve created a flexbox area that contains boxes and I want them to be spaced evenly in the available space. But the spacing is not even. It contains more space on the ends. I spent hours trying to figure out why it would not work.

I use StudioPress themes and the Genesis framework.  The Genesis themes have built in float-clearing css, and the code interferes with the Flexbox justify-content rule.

Note: This is not a knock against StudioPress themes. Many theme builders use this same code for float clearing.

The following is an example of the clearfix code found in StudioPress Genesis themes; it is the standard clearfix code:

The Problem

If the flex container has the clearfix method applied to it, then the flexbox justify-content rule won’t work. If you use justify-content: space-between; then you will get incorrect spacing. With the space-between setting, the outside boxes should have no space between the box and the container edge.

The Solution

Remove the clearfix css from the flexbox container.

The codepen below is set up with flexbox so that boxes are spaced evenly within the .flexbox container and justify-content is set to space-between. With that rule, the first and last box should butt up against the container. Instead, they have space. To fix this, change content: ” ” to content: none;

When you change it to content: none, you will see that the left and right boxes butt up against the container without any space.

See the Pen Fix Flexbox Justify-content: space-around or space-between by Pat Fortino (@pxforti) on CodePen.dark

Filed Under: Website Design 6 Comments

Previous Post: « WooCommerce Shipping Cost by Price or Weight
Next Post: How to Link to a PDF in WordPress »

Reader Interactions

Comments

  1. Benedikt Gregor says

    August 11, 2020 at 12:02 pm

    wow thanks, worked on an old project and this was the culprit

    Reply
    • Pat Fortino says

      August 11, 2020 at 2:25 pm

      That one took me several days to figure out. Not sure how I did. I spent a lot of time in the Chrome code inspector until I found the problem :)

      Reply
  2. Martrell D Leonard says

    May 14, 2021 at 3:05 am

    Thanks man!

    Reply
  3. freedman says

    July 16, 2021 at 5:15 am

    This is amazing!!!
    Thank you for taking the time to share. It save me loads of work

    Reply
  4. Sam says

    June 25, 2022 at 7:34 pm

    Thanks mate, had exactly this problem using Genesis. You saved me probably hours of digging!

    Reply
    • Pat Fortino says

      June 26, 2022 at 3:01 pm

      Glad I could help. It’s a frustrating problem.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top