Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Sergey Blokhin
Sergey Blokhin
9,612 Points

How to use flexbox to create image gallery? I

I have images different sizes, I want them to appear the same size. Also I want each image to have a caption below it. I tried to create gallery: 

  HTML:
<div class="container">
    <div class="item-1 item"><a href="img/main dish/1.jpg">
                      <img class="picture" src="img/main dish/1.jpg" alt="">
                      <p>  image caption</p></a></div>
  <div class="item-2 item"><a href="img/main dish/2.jpg">
                      <img class="picture" src="img/main dish/2.jpg" alt="">
                      <p> image caption</p></a></div>

css: .container { display: flex; flex-wrap: wrap; justify-content: center; padding: 5px; background: #fff; border-radius: 5px; margin: 25px auto; box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1); }

.item { flex-grow: 1; flex-basis: 300px; color: black; margin: 5px;
background: white; border-radius: 3px; border: 1px solid #ccc; text-align: center; }

I have few issues with it 1) I cant center the images inside the items . 2) caption appear on the right side of the image not the bottom side. 3. In some rows I have 5-6 images. Usually 5 images goes in one row and 6 th image flexes to the full width of the screen, how to make it same size as other images? Please see image https://s14.postimg.org/gvtz67c3l/Screen_Shot_0028_10_20_at_10_08_46.png

1 Answer

tylerpostuma2
tylerpostuma2
5,175 Points
tylerpostuma2
tylerpostuma2
5,175 Points

Hey Sergey,

There are a couple issues with your code, but you are getting there! I think that the best way to teach you the best way to do it is to link you to an example that I made. I will explain it fully. Here is the link:

http://codepen.io/anon/pen/XjyqVb

As far as the html goes, in your code you have the container div, which is good. As far as the content inside of your 'item' divs go, it gets a little tougher. Instead of putting the <a> tag around everything in the div, I would just put in around the <img> tag. If you really want to put it around everything you can, but that's just a suggestion :D

For your css, there are a couple of issues. The first is that you need a way to center in the images inside of the container that you gave them. There are a couple ways to do this, but I think that the best is to set the images to a block level element, then setting their width to auto, like this:

.item img { display: block; margin: auto; }

This code will center all the images on the page, regardless of their height and width. Another issue is that because your <a> tag is surrounding all of the items inside of the 'item' div, the text won't be on the bottom. A way to fix it is to put the <a> tag only around the image, that way the <p> tag will automatically go to the bottom of the image. Then, once you have done that you can add the 'text-align: center' to the <p> tag in css like this:

.item p { text-align: center; }

Lastly, i'm not too sure about what your last question is asking, but if I had to guess it would be about how the images borders are cutting out of the border that you set? If that's the case, you would need to set the width and the height of the image.

I hope that this helped! If you have any other questions feel free to reply to this post!