The main trick here is to make the
diva square.
Normally one set a
width, the
heightto
0and a
paddingthat equals to
the
width
.square { height: 0; width: 33%; padding-bottom: 33%; background: lightgray;}<div > <div> Content </div></div>现在，当我们添加时
display:flex，我们不能使用
padding百分比（Firefox错误），并且由于我们使用，所以我们也不能将高度与百分比一起使用
height: 0。
为了克服这些问题，何时可以使用视口单位vw代替，与此同时我们也可以使用height而不是padding保持平方。
因此
calc((100% / 6) - 10px);，我们没有使用这样的视口单位设置像这样的宽度，而是使用约10像素宽的装订线平均分布6个项目，而是使用视口单位
calc(( (50vw - 65px) / 6) - 10px);
的50vw是浏览器宽度的一半，则65px是的总和container的左/右填充，50px加上15px所述沟槽之间columns。
这也使我们可以跳过多余的
flex-item-inner元素，跳过
position: absolute在
content元素上的使用，并且由于我们没有在上使用百分比作为高度，因此
flex-item我们可以这样做来使内容居中
.flex-item-content { height: 100%; display: flex; justify-content: center; align-items: center;}最终结果是这样
堆栈片段
.container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 25px; border: 2px red solid;}.column { flex-basis: calc(50% - 15px);}.flex-container { display: flex; flex-wrap: wrap; justify-content: space-between;}.flex-item { position: relative; flex-basis: calc(( (50vw - 65px) / 6) - 10px); height: calc(( (50vw - 65px) / 6) - 10px); background: white; border: 1px solid red; overflow: hidden;}.flex-item-content { height: 100%; display: flex; justify-content: center; align-items: center;}.flex-item:last-child .flex-item-content { color: green;}.column .other { padding: 15px; border: 1px solid black; padding-bottom: 35px;}.column.left .other { margin-top: 10px;}.column.right .other:nth-child(n+2) { margin-top: 10px;}@media (max-width: 768px) { .flex-item { flex-basis: calc(( (50vw - 65px) / 3) - 10px); height: calc(( (50vw - 65px) / 3) - 10px); } .flex-item:nth-child(n+4) { margin-top: 12px; }}@media (max-width: 480px) { .flex-item { flex-basis: calc(( (50vw - 65px) / 2) - 10px); height: calc(( (50vw - 65px) / 2) - 10px); } .flex-item:nth-child(n+3) { margin-top: 15px; }}<div > <div > <div > <div > <div > L1 </div> </div> <div > <div > L2 </div> </div> <div > <div > L3 </div> </div> <div > <div > L4 </div> </div> <div > <div > L5<br>L5 </div> </div> <div > <div > L6 </div> </div> </div> <div > Other stuff - left </div> </div> <div > <div > Other stuff - right </div> <div > Other stuff - right </div> </div></div>
