Skip to main content
Ask A Question
Notifications
You’re not receiving notifications from this thread.
Subscribe

Using Flexbox to arrange images

CSS • Asked by Petter Jhon

Hello guys,,
I'm working on my first web dev portfolio and I have currently have two screenshots of websites I've made. I'd like them to display very simply, gallery-style, so that on a larger screen they are in a row next to each other, or on a smaller screen they stack into a column. I figured Flexbox would be the best way to do this so that I can easily add more images at a later date and they can just continue to flow together. https://showbox.bio/ https://tutuapp.uno/ https://vidmate.vet/

I can see when I do "inspect" that the Flexbox CSS rules are in effect, and running my full code through the validator shows no errors. My suspicion is that I'm mis-understanding something about Flexbox, maybe something about how child elements interact with Flexbox parents? But I can't figure out why the images aren't displaying next to each other in the browser.

Here's the section of code I'm talking about, in case it helps describe what I'm trying to do: https://codepen.io/portugueseninja/pen/zYYmrwb

Thank you :)


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 31,152+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.