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>

It helped me a lot, thank you !
(Don't forget to specify that CSS is here written in SASS)

Glad this helped @h3lt3r-sk3lt3r! I forgot this Gist existed. When I wrote this, I didn't feel that flexbox had broad enough browser support. Back then I still had to QA for Internet Explorer and other legacy browsers.

Today I would just use flexbox, but it's nice to see that these solutions still work.

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 !