我有这样的事情：
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
width: 25%;
padding: 5px;
border: 1px solid black;
Box-sizing: border-Box;
}<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>我不明白如何：
>计算.row元素的宽度
>计算.col元素的宽度
>为什么有些内容溢出了包装盒而有些却没有
我想要的是一个网格系统,该系统相对于最大的子项获得其大小,以便每个内容都适合其.col单元格.
我看到我可以使用display来做到这一点：grid和grid-template-columns：1fr 1fr 1fr 1fr,但是您如何使它具有响应能力以及它的支持程度呢？
最佳答案
要回答您的第三个问题,您只需删除宽度：25％,即可得到以下内容：
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 5px;
border: 1px solid black;
Box-sizing: border-Box;
}<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>我们没有定义任何宽度,因此每个col都适合其内容,并且该行的宽度等于所有col的总和.
现在,由于我们已根据内容定义了行的宽度,因此该行的宽度不会改变,并且将用作百分比的参考.为col使用25％意味着每个将获得先前定义的宽度的25％,并且由于每个col内的内容不同,因此在逻辑上我们会有一些溢出.
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 5px;
border: 1px solid black;
Box-sizing: border-Box;
}
.width .col {
width:25%;
}<div class='wrapper'>
<div class='content'>before width</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
<div class='wrapper'>
<div class='content'>after width</div>
<div class='row width'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>要获得想要的东西,我认为1fr的CSS网格是可行的方式(就像您已经注意到的那样).实际上CSS网格得到了很好的支持.您将只是IE的问题,您可以通过此链接查看已知的错误：https://caniuse.com/#feat=css-grid
为了使其具有响应性,您可以考虑将媒体查询切换到小屏幕上的列布局：
.wrapper {
display: flex;
width: 300px;
}
.row {
display: grid;
grid-auto-columns:1fr;
grid-auto-flow:column;
}
.col {
padding: 5px;
border: 1px solid black;
Box-sizing: border-Box;
}
@media all and (max-width:500px) {
.row {
grid-auto-flow:row;
}
}<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>