Evenly distribute space without flexbox

gistfile1.md

A lot of times I need to distribute nav-items or something in CSS, but the left and right items need to be flushed left and right and the space between all items needs to be evenly distributed.

Here are a few solutions I've come up with.

1. Use text-align: justify to evenly space items.

// JUSTIFIED LIST
.justified-list {
	margin:0;
	padding:0;
	line-height:1;
	list-style-type: none;
	text-align: justify;
	.jl-item { display: inline-block; }
	&::after {
		content: '';
	  display: inline-block;
	  width: 100%;
	}
}

<ul class="justified-list">
	<li class="jl-item"><a href="#">Item</a></li>
	<li class="jl-item"><a href="#">Item</a></li>
	<li class="jl-item"><a href="#">Item</a></li>
	<li class="jl-item"><a href="#">Item</a></li>
</ul>

2. Use display: table; in tandem with table-layout: fixed;.

.even-list {
	margin:0;
	padding:0;
	list-style-type: none;
	display: table;
	table-layout: fixed;
	width: 100%;
	.el-item {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
}

<ul class="even-list">
	<li class="el-item"><a href="#">Item</a></li>
	<li class="el-item"><a href="#">Item</a></li>
	<li class="el-item"><a href="#">Item</a></li>
	<li class="el-item"><a href="#">Item</a></li>
</ul>

I also usually favor flexbox. However, I'm using a gem (I'm working on Ruby on Rails) that doesn't support flexboxes. So your solution still applies to me !