我的页面宽度为50/50。左半部分有一行有六个div。 标准：
我的代码：https://codepen.io/johnsontroye/pen/zzNVBr
图片：enter image description here
<body>
<div class="container">
<div class="column" style="margin-right: 20px">
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L1
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L2
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L3
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L4
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L5
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L6
</div>
</div>
</div>
</div>
</div>
<div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">
Other stuff
<div>
</body>
.container {
display: flex;
flex-direction: row;
padding: 25px;
border: 2px red solid;
}
.column {
width: 100%;
height: 100%;
float: left;
}
.flex-container {
padding: 0;
font-size: 0;
border: 1px solid black;
box-sizing: border-box;
}
.flex-item {
position: relative;
display: inline-block;
height: 0;
width: 100%;
padding-top: 100%;
border: 1px black solid;
font-size: 20px;
color: black;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}
@media (min-width: 480px) {
.flex-item {
width: 33.3333%;
padding-top: 33.3333%;
}
}
@media (min-width: 768px) {
.flex-item {
width: 16.6666%;
padding-top: 16.6666%;
}
}
.flex-item-inner {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-right: 25px;
background: white;
border: 1px solid red;
box-sizing: border-box;
}
.flex-item-inner-content {
border: 1px solid orange;
}
.flex-item:last-child .flex-item-inner {
margin-right: 0;
color: green;
}
答案 0 :(得分：1)
这里的主要技巧是使div成为正方形。
通常一个设置width，height设置为0，padding设置为width
.square {
height: 0;
width: 33%;
padding-bottom: 33%;
background: lightgray;
}<div class="square">
<div>
Content
</div>
</div>
现在，当我们添加display: flex时，我们无法使用padding百分比（Firefox错误），因为我们使用了{{1}，我们无法使用百分比高度}。
要在可以使用视口单元height: 0的情况下解决这些问题，我们也可以使用vw代替height来保持平方。
因此，我们不是设置这样的宽度padding，而是使用大约10px宽的装订线平均传播6个项目，而是使用像calc((100% / 6) - 10px);这样的视口单元
calc(( (50vw - 65px) / 6) - 10px);是浏览器宽度的一半，50vw是65px左/右填充，container加上50px的总和{1}} 15px。
这也允许我们跳过额外的columns元素，跳过flex-item-inner元素上的position: absolute，并且，因为我们没有使用百分比作为content，我们可以这样做来集中内容
flex-item最终结果就是这个
Stack snippet
.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;
}
}
答案 1 :(得分：0)
这对于一些相当简单的代码是可行的，只要父列的宽度在50％-ish处是一致的，并且正方形之间的空间不必严格等于某个值。 vw（视口宽度百分比）单位允许将一致的大小应用于元素的宽度和高度。
这是一个例子，我将其归结为最少的元素，并且一些注释有助于将其移动到您的代码库中。
.flex-item的{{1}}和height（flex-basis的第三个值）来获得您喜欢的尺寸。flex或padding值，因为margin有助于我们计算。justify-content: space-between; line-height的{{1}}，可以使height和.flex-item的内部元素居中。
display: inline-block;vertical-align: middle;
答案 2 :(得分：0)
仅限最新的浏览器？ CSS Grid救援！它在最新版本中得到了很大的支持。您可能还需要一些供应商前缀;查看CanIUse了解详情。
这里是叉子：https://codepen.io/jackmakesthings/pen/MoJNNV
.container {
display: flex;
flex-direction: row;
padding: 25px;
border: 2px red solid;
}
.column {
width: 100%;
height: 100%;
float: left;
}
.grid-row {
display: grid;
grid-gap: 10px; /* set this to whatever space you need between boxes */
grid-template-columns: repeat(6, 1fr); /* grid autosizes 6 columns */
}
.row-item {
grid-column: 1 / 7; /* to span the whole row */
border: 1px solid;
padding: 10px;
}
.grid-item {
position: relative;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* This is a nifty trick for getting those fixed aspect ratio boxes. */
.grid-item:before {
content: '';
float: left;
width: 0;
height: 0;
padding-bottom: 100%;
}
.grid-item:after {
display: table;
clear: both;
}
/* Responsive grid changes? Sure! */
@media (max-width: 1000px) {
/* We just have to change the grid template: */
.grid-row {
grid-template-columns: repeat(3, 1fr);
}
/* Unexpected thing I ran into - you also have to change this, or the grid stays big enough to accommodate the old 6-column-sized row-item. Makes sense, but vexed me for a minute! */
.row-item {
grid-column: 1 / 4;
}
}<div class="container">
<div class="column" style="margin-right: 20px">
<div class="grid-row">
<div class="grid-item">L1</div>
<div class="grid-item">L2</div>
<div class="grid-item">L3</div>
<div class="grid-item">L4</div>
<div class="grid-item">L5</div>
<div class="grid-item">L6</div>
<div class="row-item">some other thing</div>
<div class="row-item">and another</div>
</div>
</div>
<div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">
Other stuff
<div>