All threads / Using Flexbox to arrange images

Ask A Question

Notifications

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 https://pnrstatus.vip/ 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.https://sarkariresult.onl/

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

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.