Выравнивание блоков на всю ширину (justify)

<div class="list">
	<a href="#">Apple</a>
	<a href="#">Xiaomi</a>
	<a href="#">Гаджеты</a>
	<a href="#">Смартфоны</a>
	<a href="#">Аксессуары</a>
</div>

.list {	
	text-align: justify;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	content: '';
	display: inline-block;    
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}
.list a {
	font-size: 20px;
	color: #0008ff;
}

<ul class="list">
	<li>Apple</li>
	<li>Xiaomi</li>
	<li>Гаджеты</li>
	<li>Смартфоны</li>
	<li>Аксессуары</li>
</ul>

.list {	
	text-align: justify;
	margin: 20px 0;
	padding: 0;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}
.list li {	
	display: inline-block;
	padding: 20px 0;
	width: 127px;
	text-align: center;
	color: #fff;
	background: #f99752;
	font-size: 19px;
}

<div class="list">
	<div class="list-item">Apple</div>
	<div class="list-item">Xiaomi</div>
	<div class="list-item">Гаджеты</div>
	<div class="list-item">Смартфоны</div>
	<div class="list-item">Аксессуары</div>
</div>

body {
	background: #eee;
}

.list {	
	text-align: justify;
	margin: 20px 0;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}
.list-item {	
	display: inline-block;
	padding: 20px 0;
	width: 110px;
	text-align: center;
	color: #fff;
	background: #ff7d7d;
	font-size: 60px;
	border: 5px solid #fff;
}