Might not help but basics of flex
https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png
Will do! I’m learning, I’m sure I will master this. Getting lots of help reading about all the beta. RM has done a great job with this and it will only get better. They cannot account for my lack of web skills. 
Thank you Steve!
a picture tells a thousand words! This is wonderful! Thanks!
I would argue (and hope) that you shouldn’t need any web skills with Elements. While there are benefits to using actual terms from CSS and HTML in regards to developing an understanding the underlying tech/concepts, doing so can also create confusion as they don’t always translate to non-devs intuitively.
That would be an amazing goal to reach for RM. In this simple example in the photo, I wanted to left align the heading and the paragraph. I had to do that in a few places and use “Start” as there was no left. But I got there… This is not word processing Ken… I keep telling myself.
2 Likes
This image is fantastic and answers many questions; thanks for sharing.
Agreed! Steve thank you again. I have made some today progress because of this!
you don’t need to read the code just check against Elements flex options
check whether you are vertical or horizontal (column or row)
I see what you’re saying, but my worry would be that this approaches leads us towards a “god component” (a very large, complex component that has many, many options). I think this could become even more confusing.
Let’s say we only have a Container, but it can be a grid, or a flex, or just a “div”. When the user switches the type we would need to present all the options for that type. It would be a lot of options appearing/disappearing and with no consistency across the Container (sometimes it has the grid options, sometimes the flex, sometimes neither).
You are correct, direct child elements are just “items” in a grid/flex. We’re aware this adds some complexity as it stands today.
We discussed this exact topic quite a while ago, and we want to improve on this so that a component could be assigned controls based on the parent component, but that’s not something that’s going to be added right now.
When we have this we will be able to remove the “flex item” and “grid item” components completely - as all they serve to do is expose flex/grid layout options.
The idea behind the Core components is to allow complete flexibility to create any layout you can imagine. We want to give you as much power as possible with these components - that’s why there are a lot of options and the property controls use technical names.
Our vision is to help you to learn these powerful Core components so you can create any layout you wish, however, we see most users going to the pre-built Section components as a first stop.
There will be a lot of Sections to choose from covering all types of layouts and designs; menus, footers, cards, galleries, banners, and so on.
The Sections will cover most use cases for most users. They will have less options, be more user friendly with regards to property names (left/right instead of start/end), but still allow you to customise them enough to make them your own.
2 Likes
I can understand why you decided to put a flex in a grid item (it can be useful/needed in some layout situations), but this can actually be achieved with a much simpler component structure:
The only really “tricky” bit was knowing the right sided Grid Item with the text in needed to have the Align option set to center:
Let me know if you have more questions
grid poster, might help or not
1 Like
Hi Bon,
I did as you suggested and it worked well. I think this is the issue for non-coders, which way to do this. Your solution is beautiful and does the same thing. Today’s lesson learned is to try and perform the task at hand with the least amount of components and see if the task can be achieved. if not add from there. I’m just thrilled that your solution worked. I overworked it for sure. It shows that more is not always better. Thank you for the help, it is most appreciated. I did go back and remove the padding on the grid and added the grid to a container as you did. All works good.
Thanks for the Grid Poster Steve!
1 Like
I’m a ‘me too’ here. I’m not a (web) coder but have fairly decent Wordpress experience.
I appreciate all the answers in this thread and I’ll be looking at the attached posters shortly.
The Elements market will be less code focused so having the GUI clear and logical is important. For me it would be clearer if the supplied sections were functional and could be studied ( that’s not intended as a criticism, just an observation).
Maybe @dan could do a Dev Diary going through the various components and describe their best use cases. If you want to have a background image use this, if you want a centred hero image use this, if you want a responsive group of items use this.
I’ve really enjoyed his videos but his familiarity with the product makes it look easier than it actually is, and it’s easy for him to skip over the reasoning for doing particular things in a particular way.
1 Like
+1 for this idea.
I am trying to wrap my head around when to use container vs section vs flex
1 Like
@bon
Ben, I’d have to say for simplicity, a master ‘container’ component is the way to go here. I found it very confusing to have to choose between two different ones & I can imagine how confused regular users would be. Any advanced controls can be collapsed or put in their own sub column to hide them from the casual user.
Yes, we certainly plan to do videos for all Components to show the basics. We’re just holding off slightly as everything is still changing and any tutorial videos we record now will be out of date VERY quickly.
Having said, in the meantime, maybe I could start to cover the basics in the weekly dev diaries 
7 Likes