Flex 容器宽度适合内容宽度与 flex-wrap: wrap? [复制]答案

【问题标题】：Flex container width fit content width with flex-wrap: wrap? [duplicate]Flex 容器宽度适合内容宽度与 flex-wrap: wrap? [复制]
【发布时间】：2017-12-03 03:13:47
【问题描述】：

这是一个例子：

.wrap {
  display: flex;
}

.wrap2 {
  padding: 4px;
  margin: 20px;
  outline: 1px dashed;
  display: flex;
  flex-wrap: wrap;
  max-width: 310px;
}

.box {
  width: 40px;
  height: 40px;
  outline: 1px solid;
}

<div class="wrap">
  <div class="wrap2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

这就是我需要的：

我试图用另一个 flex 包裹 flex 容器，但它不起作用。是否有任何 CSS 唯一的解决方案，或者我应该使用 js 来达到预期的结果？

【问题讨论】：

.box {flex-basis: calc(100% /7);} 将此属性添加到框类

标签： css flexbox

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>

.wrap {
  display: flex;
}

.wrap2 {
  padding: 4px;
  margin: 20px;
  outline: 1px dashed;
  display: flex;
  flex-wrap: wrap;
  max-width: 280px;
}

.box {
  width: 40px;
  height: 40px;
  outline: 1px solid;
}

  </style>
</head>
<body>
<div class="wrap">
  <div class="wrap2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
</body>
</html>

【讨论】：

'最大宽度：280px;'不是我们需要的。我们需要“最大宽度：100%”。您的示例有效，因为 280 / 40 = 7 没有余数。
是的，它也有效，感谢您的评论 Anton，我试图根据给定的问题做出回答。