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 80,973+ developers who get early access to new tutorials, screencasts, articles, and more.

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.