JSFiddle - React, Tailwind, and code Playground

by bseth99

HTML

<h1>Non-Flexbox</h1>

<h3>With linebreaks</h3>
<div class="menu-container">
   <ul class="menu-bar menu-justify">
      <li><a href="#">One</a>
      </li>
      <li><a href="#">Two</a>
      </li>
      <li><a href="#">Three</a>
      </li>
      <li><a href="#">Four</a>
      </li>
   </ul>
</div>

<br/><br/>

<h3>Without linebreaks</h3>
<div class="menu-container">
   <ul class="menu-bar menu-justify"><!--
   --><li><a href="#">One</a></li><!--
   --><li><a href="#">Two</a></li><!--
   --><li><a href="#">Three</a></li><!--
   --><li><a href="#">Four</a></li><!--
--></ul>
</div>

<br/><br/>

<h3>Added non-breaking space</h3>
<div class="menu-container">
   <ul class="menu-bar menu-justify"><!--
   --><li><a href="#">One</a></li>&nbsp;<!--
   --><li><a href="#">Two</a></li>&nbsp;<!--
   --><li><a href="#">Three</a></li>&nbsp;<!--
   --><li><a href="#">Four</a></li>&nbsp;<!--
--></ul>
</div>


<br/><br/>

<h1>Flexbox</h1>

<h3>With linebreaks</h3>
<div class="menu-container">
   <ul class="menu-bar-flex menu-justify-flex">
      <li><a href="#">One</a>
      </li>
      <li><a href="#">Two</a>
      </li>
      <li><a href="#">Three</a>
      </li>
      <li><a href="#">Four</a>
      </li>
   </ul>
</div>

<br/><br/>

<h3>Without linebreaks</h3>
<div class="menu-container">
   <ul class="menu-bar-flex menu-justify-flex"><!--
   --><li><a href="#">One</a></li><!--
   --><li><a href="#">Two</a></li><!--
   --><li><a href="#">Three</a></li><!--
   --><li><a href="#">Four</a></li><!--
--></ul>
</div>

CSS

.menu-container {
   margin: auto;
   width: 90%;
   background-color: #aaa;
   font-size: 14pt;
   padding: 2px;
}

.menu-bar {
   list-style: none outside none;
   padding: 0;
   margin: 0;
}

.menu-bar > li {
   display: inline-block;
   position: relative;
   background-color: #fff;
}

.menu-justify {
   text-align: justify;
   text-justify: distribute; /* Add for IE */
   font-size: 0;             /* Remove extra whitespace */
}

/* Force line break */
.menu-justify:after {
   content: " ";
   width: 100%;
   display: inline-block;
}

.menu-justify * {
   font-size: 14pt;          /* Restore font size */
}



.menu-bar-flex {
   list-style: none outside none;
   padding: 0;
   margin: 0;
}

.menu-bar-flex > li {
   display: inline-block;
   position: relative;
   background-color: #fff;
}

.menu-justify-flex {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
}