I recently created this basic float: left
layout below:
.flex-c {
display: block;
height: 450px;
width: auto;
}
.flex-i {
height: 100px;
width: 100px;
float:left;
background: gray;
margin: 0 10px 10px 0;
}
.big {
width: 210px;
height: 210px;
float:left;
}
.wrap {
display: inline-block;
}
<div class="wrap">
<div class="flex-c">
<div class="flex-i big"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i big"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
<div class="flex-i"></div>
</div>
</div>
On a few websites that I've visited, I've seen how the <div>
s can have an animated move when the window becomes smaller.
I would like to know how this can be accomplished. (CSS animations, jQuery library, etc.)
Thanks so much!