Verwenden Sie Schrumpffolien-Flexboxen, um flexible Artikel so zu verpacken, dass sie zentriert werden können

Question

Ich habe eine Flexbox mit verpacktem Inhalt. Wie verkleinert man eine Flexbox auf ihren Inhalt? Das grundlegende Problem, das ich zu lösen versuche, ist die Zentrierung der Flexbox. Dieses Bild beschreibt mein Problem:

Wie kann ich dieses Ziel erreichen? Lässt sich das mit reinem CSS erreichen? Ich weiß im Voraus nicht, ob Flexbox auf 1, 2 oder 3 Spalten umbrochen wird. Die Breite des Elements ist bekannt. Die Höhe ist vorzugsweise unbekannt, ich könnte mich aber auch für eine konstante Höhe entscheiden, wenn das einfacher ist.

Weder width:min-content、width:max-content、width:fit-content noch Inline-Flex< /code> scheint den Zweck zu erfüllen.

JS Fiddle: https://jsfiddle.net/oznts5bv/

.container {
  display:flex;
  flex-wrap:wrap;
  border:1px dashed magenta;
}

.container div {
  width:100px;
  height:60px;
  border:1px solid black;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 1

创建了两个示例：使用 display: flex; 和 display: grid;。第二个选项可能更适合您：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px dashed magenta;
  max-width: min(100%, 302px);
}

.container div {
  width: 100px;
  height: 60px;
  border: 1px solid black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

<input type="range" min="100" max="600" value="302" oninput="document.querySelectorAll('.container').forEach(el => el.style.maxWidth = 'min(100%, ' + this.value + 'px)')">
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<br>
<div class="container grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>