Flex wrap 当它换行到多行时会增加额外的空间[重复]答案

【问题标题】：Flex wrap add extra space when it wraps to multiple lines [duplicate]Flex wrap 当它换行到多行时会增加额外的空间[重复]
【发布时间】：2019-09-08 07:16:34
【问题描述】：

我有一个 flex-wrap: wrap 的 flex。当所有项目都排成一行时，容器仅采用内容宽度。但是，当它换成多行时，它会在右侧增加额外的空间。我尝试了inline-flex 和align-content: flex-start，但没有运气。

我怎样才能使项目宽度的容器恰好适合它们的宽度并添加额外的填充？

在下面的链接示例（我的笔记本电脑屏幕）上，如果我最多有 3 个项目 div（第一行有 2 个项目，第二行有第 3 个项目），那很好，但是当我添加第四个项目 div（第一个和第二个第一行的项目和第二行的第三和第四项目），填充正在自动添加。

.grandparent {
  display: flex;
}

.toggle {
  display: none;
}

.main {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}

.item {
  width: 300px;
  border: 1px dotted green;
  padding: 10px
}

.icondiv {
  width: 800px;
  border: 1px solid #333;
}

<div class="grandparent">
  <div class="parent">
    <div class="toggle">Toggle</div>
    <div class="main">
      <div class="item">first</div>
      <div class="item">second</div>
      <div class="item">third</div>
      <div class="item">fourth</div>
    </div>
  </div>
  <div class="icondiv">Icon div</div>
</div>

【问题讨论】：

CodePen Sample Here
你的意思是不添加额外的填充？
检查我的答案

标签： html css flexbox word-wrap

【解决方案1】：

我认为这样的事情会根据你的需要起作用：

.grandparent {display:flex;}
.toggle {display: none;}
.main {
  display: flex; 
  flex-wrap: wrap;
  border: 1px solid blue;
  flex-direction: row;
  width: 604px !important;
  height: 70px !important;
}
.grandparent, .parent .main, .item{ 
  width: 300px; 
  border: 1px dotted green; 
  position: relative; 
  float:left !important;
 
}
.grandparent, .icondiv { width: 800px; border: 1px solid #333;}

<div class="grandparent">
  <div class="parent">
    <div class="toggle">Toggle</div>
    <div class="main">
      <div class="item">first</div>
      <div class="item">second</div>         
      <div class="item">third</div>
      <div class="item">fourth</div>
    </div>
  </div>
  <div class="icondiv">Icon div</div>
</div>

【讨论】：

感谢您的代码。但是，您的解决方案垂直堆叠项目。我希望仅在水平空间用完时才包装物品。如果您查看我的 codepen 示例，第一和第二项在第一行，第三和第四项在第二行。这就是我想要的（右边没有额外的填充）。
@whtflower ahh 在这种情况下，您可以设置主容器宽度以适应里面的两个项目，仅从右侧填充，等待我会更新我的答案
@whtflower 检查更新的答案，应该是这样的？
父容器(.main) 不应具有初始宽度/高度。我希望它可以灵活地容纳物品。需要根据物品大小来确定。