• 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10

What I did...

I simply converted the default Magic Box thumbnails listing to use CSS Flexbox instead of inline-block. These are the converted rules, with changed properties only listed:

div.mbx-thumbs ul {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
}
div.mbx-thumbs li {
display: inline-flex !important;
flex-direction: row;
flex-wrap: wrap;
margin: 3px;
align-items: center;
justify-content: center;
background-color: #000;
flex-basis: 8%;
flex-grow: 1;
}
div.mbx-thumbs li:hover {
transform: scale(1.25);
-webkit-transform: scale(1.25);
position: relative;
z-index: 2;
}

div.mbx-thumbs li img {
border: none;
max-height: 200px;
max-width: 200px;
}