Gunakan kotak flexible shrink wrap untuk membalut item flex supaya ia boleh ditengahkan

Question

Saya mempunyai flexbox dengan kandungan yang dibungkus. Bagaimana untuk mengecilkan flexbox kepada kandungannya? Masalah asas yang saya cuba selesaikan ialah memusatkan flexbox. Imej ini menerangkan masalah saya:

Bagaimana saya boleh mencapai matlamat ini? Bolehkah ini dicapai dengan CSS tulen? Saya tidak tahu terlebih dahulu sama ada Flexbox akan membalut kepada 1, 2 atau 3 lajur. Lebar elemen diketahui. Ketinggian tidak diketahui, tetapi saya boleh memutuskan ketinggian tetap jika itu lebih mudah.

baik width:min-content、width:max-content、width:fit-content mahupun inline-flex< /code> nampaknya tidak berjaya.

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

Mencipta dua contoh: menggunakan display: flex; 和 display: grid;. Pilihan kedua mungkin lebih sesuai untuk anda:

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