Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Katia De Juan Bayona6,757 Points
How can I achieve this result with Flexbox?
I'm learning how to make different layouts with Flexbox, and I was wondering how is it done to stack a text on top of an image, being the image aligned to one side and the text on the other, like on these samples below? One of the samples is from Codepen but somehow, I'm getting lost at figuring out how did they managed to do it.
https://dribbble.com/shots/2220487-TKC-Homepage-WIP/attachments/412412 https://dribbble.com/shots/3415631-VISSLA-Redesign-Concept-Sneak-Peek https://dribbble.com/shots/3158257-C-O-N-T-E-X-T-Tranquil-Style-Tile https://dribbble.com/shots/2563974-Rob-Machado https://codepen.io/waldo/project/full/ZbVVob/
Thanks a lot in advance! ^_^
Benjamin Larson34,055 Points
The text overlay/alignment that I believe you are referring to is being accomplished by using the CSS position property with a combination of relative and absolute positioned divs.
This method (as utilized in the codepen example) is mostly unrelated to flexboxes. While you might be able to achieve this effect entirely with a flexbox, I don't personally think it's a good use-case for doing so. If there was a reason for the overall layout to use flexbox, I would take the unit of relative and absolutely positioned divs that make up that section and make the parent item a flex-item. That makes sense in my head but I'm likely not communicating it well haha.
As you noted, you may need to use the z-index to make sure the text is in front of other elements but the positioning will be the greater challenge.