Sizing and Centering Isolated Elementor Flexbox Containers

When an Elementor Flexbox container gets pushed to its own row, controlling the width, position, and alignment can be difficult. Learn what some of the challenges are as well as a solution spacing "trick". Brian also demonstrates an even better solution he's been working on which can solve the layout in under 20 seconds, maybe even under 10 seconds. :-)

[@phkoon]

That's the issue with the spacing, it gets added to the sum and might mess things up when you set sizes with different units.
So a better practice is, If you want to go with percentages, stick to percentages also for spacing, so it wouldn't mess up what the flex understanding of what the avaiable space is. I still need to dig a lot more into this, but here are some thoughts from practice:
In this case, If we want 3 equally sized child containers in the first row, we can set them to 33% width each and 0.5% column spacing in the parent container.
Or, better yet for smaller breakpoint than desktop: 32% with 2% spacing. And if you you want the fourth container to carry the same width of the previous children, it will, and you can set the partent container to justify content however you want so the last lone child gets placed in the beggining, middle or end of the second row and be excatly the same width as the others.
Although I think the point here is to achieve whatever we want and to discuss the flex-container sizing and spacings, it's another practical solution for whoever might be looking for it.

[@KingGrizzly]

I agree, % or maybe vw width gaps and columns seem like the a decent way to ensure intuitive wrapping. Personally, I've still found those % widths as gaps difficult to work with because they can either seem too narrow or too large at certain screen sizes and can be hard to align optically when a nearby container doesn't have the same number of columns and gaps.
Which leads to the solution I'll soon share:
Parent container with outer padding and row gaps.
Row container with '0' for horizontal gaps
Column container with outside gutter margin on left and right (simulates gaps)
Optional content container inside of column
Will explain more soon!

[@phkoon]

​@@KingGrizzly the never-ending way of find a solution that both results in what we want to achieve and do not bloat everything...

[@phkoon]

I'll be looking forward to this

[@phkoon]

​@@KingGrizzly Just watched a video Kevin Powell released yesterday, named as "Take control over Flexbox container", there are some good considerations there, regarding the topic

[@KingGrizzly]

@@phkoon Thanks for sharing, will watch!