Question

这是我第一次使用Stack Overflow。我是网页设计的新手，并试图通过尝试设计一个Windows 10风格的开始菜单，试图找出如何在CSS中使用flexbox，该开始菜单由带有图标的应用程序网格组成。 This is what I have so far (image).但是，当我使用小图标时，它下方的图标不会向上移动以填充空间。我知道这可以通过在特定图块上将边距设置为-50px来解决，但由于图块是可移动的并且网格是可调整大小的，因此相同的图块不会总是在彼此之上。因此，有什么我可以在CSS中或者在JavaScript中做什么来使瓷砖一直挤压在一起占据所有垂直空间？在上面的示例图中，有问题的磁贴是橙色Moodle磁贴，它应该在OneNote和PowerPoint磁贴下向上移动。我把我的代码放在下面：

每个项目在HTML

中都显示如下

<a href='http://example.com'>
   <div class='flex-item' title='Example' style='background-color: #FFFFFF; background-image: url(assets/icon.png);'></div>
</a>

除.flex-item课程外，如果这些项目是宽版或小版块，则它们也会包含.flex-item-small或.flex-item-wide类。这些项目都在<div class="flex-container"> div。

之内

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;
}

JavaScript＆amp; jQuery的

加载页面后，我运行以下脚本，该脚本只计算不同大小的图块必须具有的尺寸并将其应用于图块。

CSS Flexbox布局：填补空白

0 个答案: