Question

我有这样的东西：

.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来做到这一点，但是那您如何使它具有响应能力以及它的支持程度呢？

Answer 1

要回答您的第3个问题，您只需删除width: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的总和。

现在，由于我们已根据内容定义了行的宽度，因此它不会改变，并且将用作百分比的参考。将25%用于col意味着每个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>

要获得想要的东西，我认为CSS网格的1fr是必经之路（就像您已经注意到的那样）。实际上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>

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

1 个答案: