html-如何使Flex Grid的宽度相对于最大孩子的宽度?

前端之家收集整理的这篇文章主要介绍了html-如何使Flex Grid的宽度相对于最大孩子的宽度? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有这样的事情:

@H_301_5@.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; } @H_301_5@<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%,即可得到以下内容

@H_301_5@.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; } @H_301_5@<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内的内容不同,因此在逻辑上我们会有一些溢出.

@H_301_5@.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%; } @H_301_5@<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

为了使其具有响应性,您可以考虑将媒体查询切换到小屏幕上的列布局:

@H_301_5@.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; } } @H_301_5@<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>

猜你在找的HTML相关文章