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

Design

Dan Sinclair
Dan Sinclair
1,420 Points
Posted by Dan Sinclair
Dan Sinclair
1,420 Points

How to use flexbox for varying image sizes

Starting on a rough Portfolio website, and I would love to have different sized thumbnail images that wrap next to each other, no matter the resizing amount of a browser.

Right now, one of the larger thumbnails creates a huge amount of white space.

Can anyone point me in the right direction? 

<!DOCTYPE html>
<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel='stylesheet' type='text/css'>
  <meta charset="utf-8">
  <title>DAN SINCLAIR PORTFOLIO WEBSITE</title>
  <link rel="stylesheet" type="text/css" href="dan-sinclair-flex-CSS.css">
</head>  

<body>

    <header>
      <nav>
      <ul>
        <li><a href="http://dan-sinclair.com"> Projects</a></li>
        <li><a href="http://dan-sinclair.com/about"> About</a></li>
        <li><a href="http://dan-sinclair.com/cv-resume"> CV-Resume</a></li>
      </ul>
    </nav>

    </header>


  <div class="flexcontainer" style="position: relative; height:;">

    <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="T-Shirt-3ajeeb!.html">
          <img src="Tasmeem-T-shirt-WebTHUMB.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>

     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <img src="BlingRing_FrontShot.png"/>
    </article>


    </div>

   </div> 


</body>



</html>

/* Header Content */


header {

font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 300px;
letter-spacing: 1px;
margin: 40px auto 60px auto;
display: inline-block;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;


}

ul {
    list-style: none;

}

a:link {
    text-decoration: none;
}





/* Main Content */

article.image-thumb {
    position:relative;
    max-width:100%;
    min-width: 0;
    background:none;
    margin-left: 0%;

}

article.image-thumb img {
    width: 100%;
    height: 100%;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
}



element.style {

    position: relative;
    height: ;
}

.flexcontainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-flow: row wrap;

}

.flexcontainer {
    width: 100%;
    margin-top: 150px;
}

2 Answers

Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points
Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points

This is a good cheat sheet that can help you with using flexbox and your images. It also refers to columns and positioning so it's great for learning how to manage thumbnail images. Hope it helps link

Dan Sinclair
Dan Sinclair
1,420 Points
Dan Sinclair
Dan Sinclair
1,420 Points

There does not seem to be an answer in the generalized websites for diving into flexbox. Can anyone give a suggestion for this scenario? Using flexbox to organize varying widths and sizes of image thumbs?

Any media queries needed? If so what kinds do you suggest?

Are there any specific attributes anyone can suggest?