元素之间的间隙和环绕不一致答案

【问题标题】：Gap between elements and wrapping not consistent元素之间的间隙和环绕不一致
【发布时间】：2020-08-17 20:48:21
【问题描述】：

我有一个页面，左右均分。在右侧，我有一堆 div 元素，其中包含一个 img 和一个 span。我要做的是在每行 MOST 处显示其中四个 div 元素，并开始在较小的屏幕上换行，并有特定的间隙。

我遇到的问题是较大屏幕上的间隙更宽，并且无论我设置什么间隙值，元素都会在较小的屏幕上挤压在一起而不是环绕。

这是一个显示正在发生的事情的 gif：https://gfycat.com/remorsefulglossyherring

这是相关的 HTML（仅包含这些 div 的页面右侧）：

<div
  class="about"
  fxFlex="50%"
  fxLayout="row wrap"
  fxLayoutGap="10px grid"
  fxLayoutAlign="center center"
>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/c-sharp.png" alt="C#" />
    <span class="caption">C#</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/.net-core.png" alt=".NET Core" />
    <span class="caption">.NET Core</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/wpf.png" alt="WPF" />
    <span class="caption">WPF</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/winforms.jpg" alt="WinForms" />
    <span class="caption">WinForms</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/angular.png" alt="Angular" />
    <span class="caption">Angular</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/nodejs.png" alt="NodeJS" />
    <span class="caption">Node.js</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/html5.png" alt="HTML5" />
    <span class="caption">HTML5</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/css3.png" alt="CSS3" />
    <span class="caption">CSS3</span>
  </div>
  <div fxFlex="25%" class="item">
    <img class="img-skills" src="assets/mongodb.png" alt="MongoDB" />
    <span class="caption">MongoDB</span>
  </div>
  <div fxFlex="25%" class="item">
    <img
      class="img-skills"
      src="assets/mssql.png"
      alt="Microsoft SQL Server"
    />
    <span class="caption">Microsoft SQL Server</span>
  </div>
</div>

这是css：

.about {
  min-height: 100vh;
  justify-content: center;
  height: 100%;
}

div.item {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  width: 120px;
}

.img-skills {
  width: 100px;
  height: 100px;
  background-color: grey;
}

.caption {
  display: block;
}

【问题讨论】：

幸运的是，您的代码按预期工作！当您减小宽度时，它会包裹成单列：jsfiddle.net/Manju06/eg37c6nj/1 那么您想要什么？
如果你看一下 .gif，它们会被压在一起而不是换行。
@OP 我在 GIF 中得到了这个，但你分享的代码按预期工作就是我的意思。
那么你知道我如何改变它来实现我想要的吗？我希望 div 之间的间隙始终相同，并且当当前屏幕尺寸无法实现该间隙时，它应该将下一个元素包装到下一行。是的，它应该像您的 jsfiddle 示例一样工作，但每行最多 4 个项目。
我建议你有一个包含 4 个图标的 div 并将其设为 flex，默认情况下它会自动换行，无需额外代码。

标签： html css angular angular-flex-layout

【解决方案1】：

这是一个简单的想法，但这肯定会帮助您开始：

在这里玩：fiddle

.MainDiv {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
}

.first {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  background-color: gray;
  margin: 5px;
}

<div class="MainDiv">
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
  <div class="first"></div>
</div>

【讨论】：

【解决方案2】：

将左右 div 与主容器分开。

您的右侧 div 应如下所示。

 <div fxLayout="row" fxLayoutGap="20px">
     <div>1. One</div> 
     <div>2. Two</div> 
      <div>3. Three</div> 
      <div>4. Four</div>
</div>

【讨论】：

这只是将所有的 div 放在一行中。我尝试最多每行 4 个，随着屏幕缩小，它会将它们包裹到下一行。