Elementor Flexbox Wrapping and Alignment Problems (What Other Tutorials Aren't Showing)

preview_player
Показать описание
Wondering why your Elementor container is wrapping to the next row, or why it's hard to align containers vertically? This video explains some of the common challenges with wrapping and aligning containers in Flexbox.

Spoiler: some multi-column (more than two child containers) layouts are impossible to align and wrap precisely using grow and shrink hacks in Elementor Flexbox (due to the differing width calculations when gap numbers or values are different).

If you watch carefully, many tutorials and pre-built layout giveaways only use two column examples when explaining grow and shrink. This is because they can't align content easily once more than one gap width enters the calculations.

Gain a better understanding about what is going on and subscribe for forthcoming King Grizzly videos releasing a proven approach which ensures perfect Elementor Flexbox alignment and wrapping as well as 12-column grid support.

Curious? Disagree? Let's discuss in the comments!

Download Elementor Pro here:

We may receive a small affiliate kickback if you purchase any of these solutions using our links. Thanks for your support!
Рекомендации по теме
Комментарии
Автор

I also have a 2 tutorials about this.
How to fix layout problems in Elementor when you combine WRAP & GAP BETWEEN ELEMENTS

franktielemans
Автор

Good evening! I have one question:

For exemple, let's pick the top parent container, from the end of your video.

Let's say the fourth 33% child container is NOT set to flex-grow, so it's a small lone child container on the second row.

Are you able to center it with the parent container direction set to row as yours is?
Often I face some situation like this, where I have a parent container set to row direction and wrapping on, with space in between and the lone wolf gets wrapped and stays in the beginning of the new row, and if I want this wrapped item to be centerd, I have to set it to 100% (or put it into another child container set to grow and center the item inside of it.

phkoon