我如何创建这样的瓷砖系统？

Question

所以我创建一个Responsiv网站中，我希望有一个像上面的图片一砖系统。不幸的是我不能完成它的权利。

这是我目前的ATTEMPT。使用Flexbox的

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    width: 100%; 
 
    height: 30px; 
 
    display: -webkit-box; 
 
    display: -moz-inline-box; 
 
    display: -ms-inline-flexbox; 
 
    display: -webkit-inline-flex; 
 
    display: inline-flex; 
 
    -moz-justify-content: space-around; 
 
    -ms-justify-content: space-around; 
 
    justify-content: space-around; 
 
    -webkit-flex-flow: row wrap; 
 
    -moz-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
} 
 
.flex-item { 
 
    background: #eaeaea; 
 
    padding: 5px; 
 
    width: 130px; 
 
    height: 90px; 
 
    margin-top: 0px; 
 
    margin-left: 0px; 
 
    color: black; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.flex-item:hover { 
 
    background: #d9d9d9; 
 
} 
 
.flex-item-stop { 
 
    background: crimson; 
 
    padding: 5px; 
 
    width: 130px; 
 
    height: 90px; 
 
    margin-top: 0px; 
 
    color: black; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.flex-item-stop:hover { 
 
    background-color: #bb1133; 
 
} 
 
#Menue { 
 
    position: fixed; 
 
    left: 0; 
 
    height: 25%; 
 
    width: 650px; 
 
    float: right; 
 
    padding: 25px 0; 
 
    margin: -25px 0; 
 
    display: inline-flex; 
 
    display: -moz-inline-flex; 
 
    display: -webkit-inline-flex; 
 
    justify-content: space-around; 
 
    -moz-justify-content: space-around; 
 
    -webkit-justify-content: space-around; 
 
    flex-flow: column wrap; 
 
    -moz-flex-flow: column wrap; 
 
    -webkit-flex-flow: column wrap; 
 
}

<div id="Menue"> 
 
    <div class="flex-container"> 
 
    <div class="flex-item">Vanilla</div> 
 
    <div class="flex-item">Citrus</div> 
 
    <div class="flex-item">Bananasplit</div> 
 
    <div class="flex-item">Gum</div> 
 
    </div> 
 
    <div class="flex-container" style="margin-top:10%;"> 
 
    <div class="flex-item">Sweden</div> 
 
    <div class="flex-item">Austria</div> 
 
    <div class="flex-item">Russia</div> 
 
    <div class="flex-item">Brazil</div> 
 
    </div> 
 
    <div class="flex-container" style="margin-top:10%;"> 
 
    <div class="flex-item">Positiv</div> 
 
    <div class="flex-item">Negativ</div> 
 
    <div class="flex-item">Neutral</div> 
 
    <div class="flex-item-stop">&nbsp;</div> 
 
    </div> 
 
</div>

我只是不能创建切片之间的间距和我的结果似乎在不同的浏览器不同，尤其是在Internet Explorer的11
我也想拥有的是在一条单线“线路”中应该总是有4块瓷砖，这可能吗？

现在来问我：为了完成这样一个瓷砖系统，我必须在我的代码中改变什么？
是Flexbox的替代品吗？

任何示例建议表示赞赏。

Answer 1

你可以尝试这样的事情：

.row{ 
 
display:table; 
 
content:''; 
 
clear:both; 
 
width:100%; 
 
} 
 
.item{ 
 
box-sizing:border-box; 
 
width:25%; 
 
border:1px solid white; 
 
height:100px; 
 
background-color:yellow; 
 
float:left; 
 
text-align:center; 
 
}

<div class="row"> 
 
<div class="item">Vanilla</div> 
 
<div class="item">Gum</div> 
 
<div class="item">Citrus</div> 
 
<div class="item">BananaSplit</div> 
 
</div> 
 
<div class="row"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div> 
 
<div class="row"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div>

Answer 2

给这个裂缝：

HTML：

<div class="container"> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
    <!-- e.t.c... !--> 
</div> 

CSS：

.container{ 
    width: 100%; 
} 
.container > .inner-block{ 
    display: inline-block; 
    position: relative; 
    width: calc(25% - 13px); 
    height: 0; 
    padding-bottom: calc(25% - 13px); 
    margin: 5px; 
    background: blue; 
} 

的jsfiddle：https://jsfiddle.net/r4w1v0dm/2/