CODEWITHSUNDEEP
htmlcssflexbox
parti
parti

Reputation: 215

Nested Flexbox images wrap properly

I'm trying to set the nested images inside gallery to:

1) Wrap thumbs horizontally, i.e. in this example, one & two on first row and then below them 3 & 4 and so on..

2) Wrap thumbs vertically as well w/ wrapping thumbs moving up to top-rt & filling downward like first column.

3) Prevent thumbs from increasing gallery wrapper height & wrap instead. I tried setting gallerry to fixed height but still thumbs overflow.

<div id="list-wrapper">
  <div id="gallery">
    <div><img src="images/1.png" alt="one" /></div>
    <div><img src="images/2.png" alt="two" /></div>
    <div><img src="images/1.png" alt="three" /></div>              
    <div><img src="images/2.png" alt="four" /></div>
    <div><img src="images/1.png" alt="five" /></div>
    <div><img src="images/2.png" alt="six" /></div>
  </div>
  <div id="mainimg"><img src="images/lg.png" alt="large" /></div>
</div>


#list-wrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

#list-wrapper #gallery {
  flex: 1 1 20%;
  background-color:red;
  width:200px;
}
#list-wrapper #gallery div {
  width:100px;
  height:100px;
}
#list-wrapper #gallery div img {
  width:100px;
  height:100px;
}
#list-wrapper #mainimg {
  flex: 1 1 80%;
  background-color:blue;
}
#list-wrapper #mainimg img {
  width:100%;
  height:auto;
}

Flexbox Fiddle

Examples matching questions:

1) Horizontal: enter image description here

2) Vertical: enter image description here

3) Prevent overflow: enter image description here

Upvotes: 0

Views: 75

Answers (1)

Tibbelit
Tibbelit

Reputation: 1335

Something like this? https://jsfiddle.net/xwkr3jgL/ You can easily fix size/margin/etc. (have images in the correct ratio and sizes) to make it more pretty, but this is how you can do in like you want =)

Change the proptery flex-direction to row for

| 1 | 2 |
| 3 | 4 |
| 5 | 6 |

and to column for:

| 1 | 4 |
| 2 | 5 |
| 3 | 6 |


#list-wrapper {
  width: 800px;
  display: grid;
  grid-template-columns: 20% 80%;
  border: 10px solid #000;
}

#gallery {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 420px;
}

#gallery > div {
  width: 50%;
}

#gallery img {
    max-width: 100%;
}

#mainimg > img {
  max-width: 100%;
  display: block;
}
<div id="list-wrapper">
  <div id="gallery">
        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="one" />
        </div>

        <div>
            <img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="two" />
        </div>

        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="three" />
        </div>              

        <div>
            <img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="four" />
        </div>

        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="five" />
        </div>

        <div>
            <img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="six" />
        </div>
        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="seven" />
        </div>
  </div>
  <div id="mainimg"><img src="https://shortlist.imgix.net/app/uploads/2015/12/04110243/50-of-the-best-star-wars-quotes-60-852x568.jpg?w=1200&h=1&fit=max&auto=format%2Ccompress" alt="large" /></div>

</div>

Upvotes: 2

Related Questions