Question

我与flex-wrap: wrap有联系。仅当所有项目都适合一行时，容器才会采用内容宽度。但是，当换行时，它会在右侧增加额外的空间。我尝试了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>

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

Flex换行包装为多行时会增加额外的空间

1 个答案: