How to use flex with lists in html?

I was trying to create my portfolio page. I have 4 subheadings (About, Resume, Blog and Portfolio).

So I wanted to put these headings on top center of my div. So what I did was created an unordered list gave it property to display inline. Now all headings come to the same list.

Now I want to give spacing between the headings. Of course margin and padding options are there but is there any way in which I can avoid margin/paddings and do this directly by flex?(I wanted to reduce load on media queries for small screen)

Solution

The ul can be the flex container, and you can spread the elements evenly using justify-content: space-between:

.header {
  display: flex;
  width: 50%;
  margin: 0 auto;
  padding: 0;
  justify-content: space-between;
  list-style: none;
}

<ul class="header">
  <li class="header__item">About</li>
  <li class="header__item">Resume</li>
  <li class="header__item">Blog</li>
  <li class="header__item">Portfolio</li>
</ul>