Я работаю над TODO, я хочу, чтобы между изображением корзины и изображением стиля списка было пространство, но когда я применяю свойство flex в «списке», изображение исчезает

Я хочу, чтобы Список-Стиль-Изображение был Apppear при использовании "сгибать" и имел пробел между изображением "мусорное ведро" и Список-Стиль-Изображение. Я не знаю, почему каждый раз, когда я применяю свойство flex к "Li", изображение исчезает.

let input = document.querySelector("#textFeild");
let button = document.querySelector("#button"); 
let toDoContainer = document.querySelector("#toDoContainer");
let ul = toDoContainer.querySelector("ul");


// Adding Event on Button 
button.addEventListener("click", function(){
  let li = document.createElement('li');
  li.style.listStyleImage = "url('assets/icons/checkbox.png')";  
  li.style.display = "list-item";
  li.innerText = input.value;
  li.style.fontSize = "30px";
  li.style.borderBottom = "1px solid #f2f1f1";
  li.style.padding = "20px";
  li.style.display = "flex";   //problem is here 
  li.style.justifyContent = "space-between";  
  ul.appendChild(li);
  let bin = document.createElement("IMG");
  bin.setAttribute("src", "assets/icons/bin.png");
  bin.setAttribute("width", "30");
  bin.style.marginLeft = "auto";
  li.appendChild(bin);
  input.value = "";  //It will Clear the Feild for next Value.

  //We write Event-listner on Paragrahs (Nested) Here Because of "let" Block-Scope.
  li.addEventListener("click", function(){
    li.style.textDecoration = "line-through";
    li.style.listStyleImage = "url('assets/icons/checkmark.png')"; 
  })
  bin.addEventListener("click", function(){
    ul.removeChild(li);
  })
})