Question

我有一些问题实现Flex-box，在我对视图的要求中我有一个卡列表，每张卡都有一个默认的宽度和高度。我可以使用柔性盒，我更喜欢它。当列表的元素不适合行时，它们应该换成新的，总是从左到右，所有列表都集中在容器的可用空间中。

以下是布局的a plunker和代码：

.list {
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  background-color: #e6e6e6;
  margin: 12px;
}

<body>
  <div class="list">
    <div class="item">someItem01</div>
    <div class="item">someItem02</div>
    <div class="item">someItem03</div>
    <div class="item">someItem04</div>
    <div class="item">someItem05</div>
  </div>
</body>

这就是我想要实现的目标：

这就是我目前所拥有的：

如何在不重复出现大量媒体查询，硬编码边距/填充等的情况下实现这一目标？

Answer 1

这不是一个非常简洁的HTML，但你可以用一些填充元素来实现这个结果：

.list {
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  background-color: #e6e6e6;
  margin: 12px;
}

.filler {
  width: 200px;  
  margin: 12px;
}

<body>
  <div class="list">
    <div class="item">someItem01</div>
    <div class="item">someItem02</div>
    <div class="item">someItem03</div>
    <div class="item">someItem04</div>
    <div class="item">someItem05</div>
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="filler"></div>
  </div>
</body>

如何使用wrap并将Flex列表容器居中并对齐flex-start元素

1 个答案: