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 Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

FlexBox next line not working?

Hi,I added Felx Wrap but its not working.PLEASE HELP

HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Home Sweet Flower</title> <link href="style.css" rel="stylesheet"> </head> <body> <header> <a href="index.html"><h1>Bella and Thorne</h1></a> <nav> <ul> <a href="contact.html"><li>Contact US</li></a> <a href="about.html"><li>About US</li></a> <a href="flowers.html"><li>Flowers</li></a>

</ul>

</nav> <div class="gallery"> <figure> <img src="Images/white_roses.jpg" alt="white roses"> <figcaption> White Roses </figcaption> </figure> <figure> <img src="Images/red_roses.jpg" alt="white roses"> <figcaption> Red Roses </figcaption> </figure> <figure> <img src="Images/sunflower.jpg" alt="white roses"> <figcaption> Sunflowers </figcaption> </figure> <figure> <img src="Images/lillies.webp" alt="white roses"> <figcaption> Lillies </figcaption> </figure> <figure> <img src="Images/Daisies.jpg" alt="white roses"> <figcaption> Daisies </figcaption> </figure> <figure> <img src="Images/gladioli.jpg" alt="white roses"> <figcaption> Gladioli </figcaption> </figure> <figure> <img src="Images/carnations.jpg" alt="white roses"> <figcaption> Carnations </figcaption> </figure> </div> </header> </body> </html>

CSS body{ background:url("Images/wallpaper.jpg") no-repeat; background-size: cover; background-position: center; }

h1{ float: left; color: #ffffff; padding: 30px; font-family: monospace; } h3{ color: floralwhite; font: 2.em monospace; text-align: center; position:absolute; top:350px; left: 630px; }

h2{ color: ghostwhite; font-size: 3em ; position:absolute; bottom:250px; left: 550px; } header { width: 100%; }

nav ul li{ list-style-type: none; float:right; margin-right: 70px; padding: 10px; margin-top: 40px; font-size: 2em; font-family: monospace; color:floralwhite; }

/* Image Gallery */ figure{ width: 200px; height: 200px; border: 1px solid #777; padding: 8px; box-sizing: border-box; flex-shrink: 0; flex-wrap: wrap; } figure img{ width: 100%; height: 100%; } figure figcaption{ text-align: center; padding: 8px 4px; }

.gallery{ display:flex; width: 900px; margin: auto; margin: 0; justify-content: space-between; }

2 Answers

robinhickson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
robinhickson
Front End Web Development Techdegree Graduate 18,162 Points
robinhickson
.a{fill-rule:evenodd;}techdegree seal-36
robinhickson
Front End Web Development Techdegree Graduate 18,162 Points

Hi Azzie

I'm taking a look by copy-pasting your code into separate HTML and CSS files. Of course, this doesn't include the image sources, so it's a little hard to replicate exactly what you're aiming at. If you like, you could update your question with a link to your code repo or a shared workspace? That would make it easier to follow along. Even without that, I can see that you've made a lot of progress - it's nearly there! I have two hints to help you find your way to completion. The first directly answers your question:

First hint: The happy news? ;) You only need to add one line of CSS to your .gallery class! At the moment, the flex-wrap you have added is on the gallery images themselves (the 'items' of the flex container, where the flex container is the .gallery). Flexbox is activated on the container, or parent, of the items that you want to be subject to flex layout.

.gallery{
     display:flex;
     flex-flow: row wrap;
     width: 900px; 
     margin: auto; 
     /* margin: 0;  */
     justify-content: space-between; 
    }

As you can see I've added the flex-flow line, setting the values to row and wrap. You could also simply add the line 'flex-wrap: wrap' instead of flex-flow. But I find that the flex-flow line(which is shorthand for flex-direction: and flex-wrap: ) helps to remind you when looking back through your code which flow-direction (row or column (or reverse of either)) you are using for that particular CSS selector. The reason it didn't work before? The default settings for Flexbox are flex-direction: row, and flex-wrap: nowrap. So if you don't specify by changing flex-wrap to 'wrap', 'nowrap' is what you'll get. Note here that I've also commented out the margin:0 line. Because it comes after margin:auto, it negates margin: auto altogether. You could choose one or the other, and delete the remaining margin: line.

Second hint: The header wraps all of the gallery content. Is this intended?

Let me know if I can help further,

Robin

Jassim Alhatem
Jassim Alhatem
20,883 Points
Jassim Alhatem
Jassim Alhatem
20,883 Points

You need to make sure that the container is displayed as flex.

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