I’m looking for some guidance on how the “content layout” settings are used within the Container component. For example, I created a container and put two images in it that seem to default to the being left-aligned within the container. I understand how to easily align these images within the container wherever I want using their spacing own controls (e.g. set their left-right margins to auto and 0 to right align them). However, within the container component itself there are the “content layout” settings that include options to align and justify contents that I instinctively imagined would align/justify the two images within the container, however those content layout controls within the container don’t seem to have any effect, apart from the gap control that works great. There’s obviously something I am not understanding, but I haven’t been able to find an explanation within the tutorials (it’s probably there somewhere).
Can somebody point me in the right direction please.
I think one thing you can use as food for thought on this is…
Visualise the container at a certain width, say 1000px, and visualise it containing a single item of a certain width. That item may be say 200px wide, or even full width.
If you set content layout to align center for example, the item will align center visually IF it’s 200px wide. But if it’s full width, you won’t visually seee any change. If you align something the same width as the container center of the container, then there isn’t really any difference visually.
Thanks for your response Doobox. I did understand that if both container and content were full width there would be no change to see, and in this case I had deliberately set the images to be a much smaller width than the container so I could easily see the justify contents settings in action, and that’s why I couldn’t understand why it wasn’t working for me. However, your example referred to having content of specific px widths and I wondered if there was a clue in that, and so I did another experiment. In my original trial I had made the images smaller by setting the image size to 20% screen width so they would always be a fifth of the width of the full-width container they were in, regardless of screen size. After your comment, I tried setting them to a fixed pixel width rather than as a percentage width and immediately the content layout justify settings worked as expected! I’m sure there are very good reasons under the hood of the container as to why the content justify settings can’t work with %-width content, but it was quite a head scratcher for me.
I suspect for building responsive sites it is probably better using the various spacing settings to handle justification of items within a container, and have noticed in Dan’s videos that he usually handles it that way. At some stage in the future it would be good to see a tutorial on specific use cases for those “content layout” settings within the container.