以动态宽度居中 div，包含卡片

Question

如何使以下元素居中：

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

卡的数量是动态设置的。外部div的宽度也是如此。根据外部 div 的宽度，我想像这样显示它们：

|                                    |
|    |Card 1 | |Card 2 | |Card 3|    |
|    |       | |       | |      |    |
|                                    |
|    |Card 4 |                       |
|    |       |                       |



|                           |
|    |Card 1 | |Card 2 |    |
|    |       | |       |    |
|                           |
|    |Card 3 | |Card 4 |    |
|    |       | |       |    |



|                                              |
|    |Card 1 | |Card 2 | |Card 3| |Card 4 |    |
|    |       | |       | |      | |       |    |

还有其他类似的问题 (Centering a div block without the width)，但它们不处理多行卡片。 我尝试过使用以下内容：

.outer {
  text-align: center;
}

但是这会使卡片 4 位于中间而不是左侧。

或者

.outer {
  width: 100%;
}
.inner {
  display: inline-block;
  transform: translateX(-50%); 
  left: 50%;
}

这有效，但仅在有单行卡片时才有效。当卡片的数量超过一行时，它会将所有内容对齐。

Answer 1

这是否解决了您想要做的事情？

.outer {
  display: flex;
  justify-content: center;
}

.inner {
  display: flex;
  flex-wrap: wrap;
}

.cards {
  flex-basis: calc(100% / 3);
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

Answer 2

.outer {
  width: 100%;
}
.inner {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
}

.cards {
    width: calc(33.3333% - 40px);
    height: 270px;
    background-color: bisque;
    margin: 20px;
    box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

.outer {
  width: 100%;
}
.inner {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

.cards {
    width: calc(33.3333% - 40px);
    height: 270px;
    background-color: bisque;
    margin: 20px;
    box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

.outer {
  width: 100%;
}
.inner {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
}

.cards {
    width: 200px;
    height: 270px;
    background-color: bisque;
    margin: 20px;
    box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="cards">Card 1</div>
    <div class="cards">Card 2</div>
    <div class="cards">Card 3</div>
    <div class="cards">Card 4</div>
    <div class="cards">Card 5</div>
    <div class="cards">Card 6</div>
    <div class="cards">Card 7</div>
    <div class="cards">Card 8</div>
    <div class="cards">Card 9</div>
    <div class="cards">Card 10</div>
    <div class="cards">Card 11</div>
    <div class="cards">Card 12</div>
  </div>
</div>

来自俄罗斯的您好！我爱来自美国、欧洲、亚洲的人们。那你想做什么？

Answer 3

尝试在您的卡片上使用flex: auto。

.cards { 
   flex: auto; 
}

这和flex: 1 1 auto一样，又是flex-grow: 1; flex-shrink: 1; flex-basis: auto的简写；

然后在.inner 上使用display: flex; flex-wrap: wrap;

.inner { 
   display: flex;
   flex-wrap: wrap; 
}

---

看看这个sn-p中的css。它有一个小操场，因此您可以动态调整 .outer 容器宽度，以及外部填充、卡片边距和卡片填充：

如果你愿意，可以试试CodePen Demo：

var controlContainer=document.createElement("div");controlContainer.innerHTML='<div style="margin: 0px 0px 20px; display: flex; width: 100%; flex-direction: column; justify-content: space-around;" class="controls"><div style="display: flex; align-items: center; height: 30px;"><input class="outer-ctrl" type="range" min="100" max="1200" value="300"><label> <code>.outer { width: <span class="outer-span">300px</span> } </code></label></div><div style="display: flex; align-items: center; height: 30px;"><input class="outer-padding" type="range" min="0" max="30" value="0"><label><code>.outer: { padding: <span class="padding-span">0px</span> }</code></label></div><div style="display: flex; align-items: center; height: 30px;"><input class="card-margin" type="range" min="0" max="30" value="0"><label><code>.cards { margin: <span class="margin-span">0px</span> }</code></label></div><div style="display: flex; align-items: center; height: 30px;"><input class="card-padding" type="range" min="0" max="30" value="0"><label><code>.cards { padding: <span class="card-padding-span">0px</span> }</code></label></div></div>',document.body.prepend(controlContainer),document.querySelectorAll("span").forEach(function(e){e.style.cssText="background: black;color:white;padding: 7px;"}),document.querySelectorAll(".cards").forEach(function(e){e.style.cssText="background:yellow; border: 1px solid blue;"}),document.querySelector(".outer-ctrl").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelector(".outer").style.width=n,document.querySelector(".outer-span").innerText=n}),document.querySelector(".card-margin").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelectorAll(".cards").forEach(function(e){e.style.margin=n}),document.querySelector(".margin-span").innerText=n}),document.querySelector(".outer-padding").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelector(".outer").style.padding=n,document.querySelector(".padding-span").innerText=n}),document.querySelectorAll(".cards").forEach(function(e){e.style.cssText="background:yellow; border: 1px solid blue;"}),document.querySelector(".card-padding").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelectorAll(".cards").forEach(function(e){e.style.padding=n}),document.querySelector(".card-padding-span").innerText=n}),document.body.style.cssText="margin:0;padding:0;",document.querySelector(".outer").style.border="1px solid #333;";

.outer {
  width: 300px;
  border: 1px solid #333;
}

.inner {
  display: flex;
  flex-wrap: wrap;
}

.cards {
  flex: auto;
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>