将一组包裹的柔性物品居中

Question

我正试图将一组包裹的柔性物品居中.HTML看起来像这样:

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

DEMO

以上看起来像这样:

绿色框被正确包裹,但它们作为一个整体不在红色区域的中心,

没有定义宽度.container因为红色块可以有任何大小,我想尽可能多地匹配彼此相邻的块.

有什么建议如何集中包裹的绿色块？

更新:根据这个 2岁的帖子,这是不可能的.所以在我的情况下,我必须使用JavaScript来解决这个问题.但也许我可以使用CSS网格布局

Answer 1

不确定你想要什么样的居中

所以有几个选择:

选项1:只需将元素置于中心位置 .container

• 添加justify-content: center; 到.container相反

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

选项2:居中 .container

• 添加一些width+ margin:auto 到.container

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 300px;
  margin: auto;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
  box-sizing: border-box
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

选项3:从上面的选项中选择

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  justify-content: center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>