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

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来实现该目标，但是如何使其响应式，并且它的兼容性如何？

- ostrebler

Answer 1

要回答你的前三个问题，你只需删除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 的总和。

现在，由于我们已经基于内容定义了行的宽度，它不会改变，并且将被用作百分比的参考。对于 col 使用 25% 意味着每个 col 将获得先前定义宽度的 25%，并且由于每个 col 中的内容不同，我们将逻辑上有一些溢出。Original Answer翻译成"最初的回答"

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

- Temani Afif