Masalah penambahan dinamik dengan kekurangan ruang antara elemen

Question

Saya mempunyai templat berikut dalam penanda saya. Kemudian saya memasukkannya ke dalam DOM saya seperti ini. //Sebelum sasaran yang ditentukan

P粉384244473 · Answer

Gunakan flexbox untuk meruntuhkan semua ruang putih dan menambah jurang.

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}

function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

let num = 4;
$("#add-btn").on("click", function(e) {
  addSequenced({
    id: num,
    number: num,
  }, $(this));
  num++;
});

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}