html - Flex wrap 在换行到多行时添加额外的空间

<分区>

我有一个带有 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>

最佳答案

我认为这样的东西会根据你的需要工作:

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

关于html - Flex wrap 在换行到多行时添加额外的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55737762/

上一篇：html - 为什么 box-shadow 属性不应用于 <tr> 而是直接应用于 Edge 中的 <td> 元素？

下一篇：javascript - 我的 h1 标签字体系列突然从它在 css 中的原始字体系列改变了

相关文章：

javascript - 使用本地存储保存自定义列表显示中的更改

html - 水平子菜单不显示

javascript - 单击按钮时清除 div(ASP.NET)

css - Flexbox 网格 : How to display 3 items side-by-side but varying vertical positions

javascript - 如何创建html5的详细信息标签

html - CSS 溢出-y : scroll scrollbar position not in the right place

html - JavaScript 与 CSS

css - Div 在小屏幕上重叠

html - 如何制作一个具有两个屏幕大小的 div 的可滚动 flexbox？

html - Flexbox 强制新列