Flex Container Crash Course - Elementor Wordpress Tutorial

Flex Container Crash Course - Elementor Wordpress Tutorial

00:00 Intro
00:12 Adding a Flexbox Container
01:16 Add Content
01:35 Boxed vs Width
02:36 Understand Direction
03:33 Justify Content [Column]
04:31 Align Items [Column]
05:11 Positioning Items [Column]
05:57 Using Grow to add spacing [Column]
06:31 Gaps [Column]
06:57 The Row Direction
08:10 Justify Content [Row]
08:57 Align Items [Row]
09:39 Wrap [Row]
10:44 Custom Width [Row]
11:45 % Custom Width [Row]
14:23 Using Grow to Fit Items [Row]
15:31 Align Contents with Wrap [Row]
16:35 Child Containers
18:23 Align Self with Stretch [Child Row]
19:35 Wrap [Child Row]
20:09 Conclusion

Elementor Hosting - managed wordpress hosting :

Elementor Pro - The builder that will make you a pro

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[andreasleese]

This to date is THE most concise tutorial about FlexBox on YouTube! So much information packed in a 20 Minute Video, you will want to watch it twice to get everything out of it.
Great Job, as always! 👍👌

[Msdjebe]

A very good quality tutorial! I'm quite advanced in Elementor and still discovered few things. Many thanks!

[dannyalexander]

You're awesome. Love your content and your dedication.
Very knowledgeable, great at teaching, and enjoyable to watch and learn from/with.

Thank you for hard work and commitment to helping others learn.
It's appreciated, and so are you.

All the best to you..

[dots]

Thanks for this. I've been using multiple containers to achieve some of the things shown in this video.

[Mulator]

Thank you, Imran! I thought I knew flex box containers, but I did learn something new from this tutorial! Would love something similar on grid thanks again!

[trainerlounge]

Wau! What a super duper great tutorial. Now, finally, I guess I've got it 🙌 Thank's a lot 🫶

[LuisCamberosVids]

Just when I thought I knew everything about Flexbox, I picked up a lot of tips from your excellent tutorial!

[shahidulislam]

WOW, this is a really great tutorial who want to learn Flexbox. Thanks, Imran brother

[frog_marketing]

Absolutely loving the grow function! I've been fiddling with the %s and worrying about how it will translate on the myriad of sizes - this is a game changer!

[warblog]

I’ve been very reluctant to switch as I only build websites for me. After viewing this; and I will rerun later, I know I can switch without too much of a learning curve. As always: thank you for sharing your knowledge and advice.

[NicholasZein]

Just brilliantly presented! 👏🙌 💪

Thank you! 🙏

[LittleChicPrints]

This was so helpful!! Thanks a lot for your guidance.

[tiyopapee]

THanks Imran, hope Grid container next . well explained all the best.

[CariOG]

Nice Explanation! I've got one question though: is the align feature good in terms of speed optimization or is padding still more optimal? Thx in advance!

[kevinj]

I prefer using grids. Helps me understand everything better.

[emv]

Doing a deep dive through your tutorials 😅, not sure if I missed this, but when working with containers in columns, what is the best method to align each container to the same height? For example, one column container has less text than the other, and therefore is shorter, and how do I make this look good on mobile and tablet?

[MrPhilcorn]

Thanks that was helpful. Do you usually prefer Grids or Flexbox? Flexbox for more individual different styles and Grids more for like items which keep the same size, like image catalogs or similar?

[matthuwmcenery]

Quick Question have you done a Video on best container global settings e.g. is it best to set Site Settings "Container Padding" to 0 then set it manally as you build and should you still set the padding of the outer container

[warblog]

Bit of a newbie question. I am still working in sections and want to use containers but want to be able to use sections as a fallback. Can I create a number of blank pages with simple sections then switch on containers and use containers if I want to alongside sections on these blank pages? I really want to have megamenus on section pages - is this possible? TIA

[kkokoruz]

When I set my parent container to 100% (Full Width) with a Horizontal Row, Wrap turned on, and a Gap of 20px and set my 8 Child Containers to 25% I expect that I would have 2 rows of 4 but instead O have 3 rows. because it only puts 3 child containers in a row before wrapping. If I set my Parent Container Gap to 0 then the 25% works and I have 2 rows of 4. I'm watching you video and that was the one aspect of your training that I was hoping to see explained. Can you provide an explanation on how this is accomplished. Right now the only way I can think is with a width using calc of 25% minus the gap but that seems like a hack vs a solution. Looking forward to your response!