Utilisez des boîtes flexibles sous film rétractable pour emballer les éléments flexibles afin qu'ils puissent être centrés.

Question

J'ai une flexbox avec un contenu emballé. Comment réduire une flexbox à son contenu ? Le problème fondamental que j'essaie de résoudre est le centrage de la flexbox. Cette image décrit mon problème :

Comment puis-je atteindre cet objectif ? Est-ce que cela peut être réalisé avec du CSS pur ? Je ne sais pas à l'avance si Flexbox s'enroulera sur 1, 2 ou 3 colonnes. La largeur de l'élément est connue. La hauteur est de préférence inconnue, mais je pourrais décider d'une hauteur constante si c'est plus facile.

Ni width:min-content、width:max-content、width:fit-content ni inline-flex< /code> ne semblent faire l'affaire.

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

Création de deux exemples : en utilisant display: flex; 和 display: grid;. La deuxième option vous conviendra peut-être mieux :

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