小编Mat*_*nez的帖子

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

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

这是布局和代码的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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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