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>