元素之间的间隙和包装不一致

Question

我有一个左右平分的页面。在右侧，我有一堆 div 元素，其中包含一个 img 和一个 span。我想要做的是每行最多显示其中四个 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;
}

Answer 1

使其与主容器左右div分开。

你的右边div应该是下面这样的。

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

Answer 2

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

在这里玩：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>

元素之间的间隙和包装不一致

Gap between elements and wrapping not consistent

html

css

angular-flex-layout

angular