This is my first time on Stack Overflow. I am new to web design, and have been trying to figure out how to use flexbox in CSS by trying to design a Windows 10-style start menu, made up of a grid of apps with icons. This is what I have so far (image). However, when I use the small icons, the icon beneath it does not move up to fill the space. I know that this can be solved by setting the margin to -50px on that specific tile, but since the tiles are moveable and the grid is resizable, the same tiles will not always be above each other. Therefore, is there anything I can do either in CSS or maybe in JavaScript that would make the tiles consistently squish together to take up all vertical space? In the example image above, the tile in question is the orange Moodle tile, which should move up under the OneNote and PowerPoint tiles. I've put my code below:
Each item looks like this in the HTML
<a href='http://example.com'>
<div class='flex-item' title='Example' style='background-color: #FFFFFF; background-image: url(assets/icon.png);'></div>
</a>
In addition to the .flex-item class, the items also have the .flex-item-small or .flex-item-wide classes if they are wide or small tiles. The items are all within the <div class="flex-container"> div.
The CSS
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: space-around;
align-content: space-around;
margin: auto;
}
.flex-item{
height: 100px;
margin: 2px;
color: white;
font-family: 'roboto', sans-serif;
font-weight: 100;
font-size: 12px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background-position: center center;
background-size: auto 45%;
cursor: pointer;
background-repeat: no-repeat;
position: relative;
border-width: 2px;
border-style: solid;
}
The JavaScript & jQuery
Upon load of the page, I run the following script which just calculates the sizes that the different-sized tiles must have and applies them to the tiles.
