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

Question

如何使用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)

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

这就是我现在所拥有的:

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

Answer 1

val*_*als 6

它不是一个非常简洁的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;
}

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 class="filler"></div>
    <div class="filler"></div>
    <div class="filler"></div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

@Michael_B是的,这真的不是flex的任务.希望Grids将在不久的将来上市 (2认同)

归档时间：	8 年，12 月前
查看次数：	1426 次
最近记录：	8 年，12 月前