Ask A Question


You’re not receiving notifications from this thread.

Using Flexbox to arrange images

SomnicFernas asked in General

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 ea sily a dd more i mages at a later date and they can just continue to flow together.

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 ab mobdro out 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.


This is the code you want at a very base level for flexbox. However, you do have other options such as grid which involves less code.

.flex {
  display: flex;
  flex-wrap: wrap;

.flex-child {
  flex: 0 0 100%;

@media only screen and (min-width: 640px) {
 .flex-child {
    flex: 1;
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,453+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.