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)