dynamically align thumbnails in a row

Question

I have simple gallery like this:

<div class="gallery">

<div class="thumbnail">

    <img src="1.jpg">

</div>  

<div class="thumbnail">

    <img src="2.jpg">

</div>  

...

</div>

How to auto-align thumnbails in row?

First thumbnails from the row should be align to the left and last from row to the right

Margin between align should be change dynamically.

possible duplicate of [CSS flexbox: difference between align-items and align-content](http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content) — klaar, Aug 03 '15 at 11:57
See http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content, where `justify-content` should either be set to `space-between` or `space-around`. — klaar, Aug 03 '15 at 11:58

singe3 · Answer 1 · 2015-08-03T12:07:27.303

3

You can use display: flex on the outer box.
And use all the flex properties you need to display the inner boxes as you like.

.gallery{
    display: flex;
    flex-direction: row;
}

.thumbnail{
    flex: 0 0 100px;
    height: 100px;
    border: solid gray 3px;
}

Live example https://jsfiddle.net/m12xcxwy/

Complete tutorial on flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Aug 03 '15 at 12:07

answered Aug 03 '15 at 12:00

singe3

2,065
4
30
48

How have I lived so long without this information?! – trex005 Aug 03 '15 at 12:06
@trex005 This is a rather recent feature of CSS3, it won't work in IE I guess but who cares – singe3 Aug 03 '15 at 12:09
Works from IE9 onwards with vendor prefix -ms-flex. – m4n0 Aug 03 '15 at 12:20

score 2 · Answer 2 · answered Aug 03 '15 at 12:18

2

hi you can see if this is as per your desire

.gallery{
    display:block;
}
.thumbnail{
    display:inline-block;
    border:1px solid black;
    float:left;
    height:100px;
    width:100px;
}

answered Aug 03 '15 at 12:18

Himesh Aadeshara

2,114
16
26

`display:inline-block;` isn't required here to make it work – singe3 Aug 03 '15 at 12:26
@singe3 you can work with display:inline-block but then the div with thumbnail will get the block individual if you remove then all that div's will work as a whole block – Himesh Aadeshara Aug 03 '15 at 12:34
@singe3 so it's fine whether to use or not but it's the difference bdw thanx for that – Himesh Aadeshara Aug 03 '15 at 12:35
@Igor checkout the answers – Himesh Aadeshara Aug 03 '15 at 12:37

dynamically align thumbnails in a row

2 Answers2