CSS flex stretch and flex end align items
hi there,
I'm having a little trouble on mobile here3.
I'm am using flex, which everything work, but I want my image to stretch the entire width of the container, however, I do not want it to be pulled up from the bottom as it does. When I use flex0end, it stays at the bottom correctly, but the image doesn't get more height when giving it height or anything.
5 Replies
The code that's highlighted there is the
<div> the image is inside of. Give it a bg-color, and you'll see that it is stretching 🙂
When you used the flex-end, it went to the bottom because the div moved down, so the image inside went with it.
The image is going to just be the size it needs to be to fit (which I'm guessing it has a max-width: 100%, so it's fitting that div on the width).
You can get it to match the height, but if you do that, it's going to have to overflow out the side, since it's also going to get wider to maintain it's aspect ratio.thanks.
Yes, I am aware. That is my dilemma
I want it to sit like Flex-end, but I want it to stretch like stretch without pulling up from the bottom.
Is it worth this or shoudl I just do boock elements on mobile?
I think I'd just stack them on mobile, not enough room if you want to keep the image looking good
thank you!!!