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

我有这样的事情：

.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>

原文链接：https://www.f2er.com/html/530504.html

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

猜你在找的HTML相关文章