Flex布局网格格式

Question

这是我当前的网格格式：

​

​

代码：

          <div fxLayout="row wrap">
            <img
              class="component-logo"
              fxFlex="1 1 calc(20% - 5px)"
              fxLayoutGap="5px grid"
              *ngFor="let component of package.components | slice: 0:9"
              src="../../assets/component-logos/{{ component }}.svg"
              onerror="this.src='../../assets/component-logos/component-placeholder.svg';"
              title="{{ component }}"
            />

是否可以使用flex布局来遵循这种格式：

​

​

显然，我比我想要的格式少了一个图标，但是这个概念是自由地调整网格以我想要的任何格式(比如如果有7个图标，把最后两个图标放在第2和第4图标下面等等)最终，我希望图标在彼此的下面排列。

Answer 1

使用CSS/SASS：

​

nav {
  display: flex;
  flex-wrap: wrap;
  width: 195px;
  justify-content: center;
}

img {
  height: 30px;
  width: 30px;
  background: lightblue;
  margin: 0 5px 0 5px;
  object-fit: cover;
}

img:nth-child(-n+5) {
  margin-bottom: 10px
}

img:nth-child(1) {
  margin-left: 0;
}

img:nth-child(5) {
  margin-right:0px;
}

<nav>
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
</nav>

​