JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="flex-container">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

CSS

#flex-container {
   display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 10px;
   border: solid 1px red;
}

#flex-container > li {
    float: left;
    list-style: none;
    margin-right: 10px;
    padding: 10px;
    border: solid 1px #000;
}