How to Make Bullet Points Appear When Using display: flex?

Question

I'm having an issue with bullet points not appearing in a list when I use display: flex on the parent element. Here's a simplified example of my code:

ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<ul>
  <li>
    <div>Item 1</div>
    <div>
      <mat-icon>edit</mat-icon>
      <mat-icon>delete</mat-icon>
    </div>
  </li>
</ul>

In this setup, the bullet points for each list item are not displayed. How can I fix this so that the bullet points appear as expected?

Answer 1

@userNameAsString is correct, display: list-item is overwritten by display: flex. Fortunately <li> content can be anything (see flow content), so just wrap an element around each of the <li>s' content and make those the flexbox (ie the element with display: flex).

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<ul>
  <li>
    <div class="item">
      <div>Item 1</div>
      <div>
        <mat-icon>edit</mat-icon>
        <mat-icon>delete</mat-icon>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div>Item 2</div>
      <div>
        <mat-icon>edit</mat-icon>
        <mat-icon>delete</mat-icon>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div>Item 3</div>
      <div>
        <mat-icon>edit</mat-icon>
        <mat-icon>delete</mat-icon>
      </div>
    </div>
  </li>
</ul>