Равномерное выравнивание блоков по ширине

Как равномерно выровнять блоки по ширине с помощью CSS

Создадим простую html-разметку для примера:

<ul class="menu">
    <li class="menu_item"><a href="#" class="menu_link">Раз</a></li>
    <li class="menu_item"><a href="#" class="menu_link">Два слова</a></li>
    <li class="menu_item"><a href="#" class="menu_link">Это</a></li>
    <li class="menu_item"><a href="#" class="menu_link">Просто</a></li>    
    <li class="menu_item"><a href="#" class="menu_link">Пример</a></li>
</ul>

<li class="menu_item"><a href="#" class="menu_link">Два слова</a></li>

<li class="menu_item"><a href="#" class="menu_link">Просто</a></li>

<li class="menu_item"><a href="#" class="menu_link">Пример</a></li>

</ul>

Вся магия в css коде:

.menu{
    background: #666;
    
	display: -webkit-box; /* Android 4.3-, Safari без оптимизации */
    -webkit-box-pack: justify; /* Android 4.3-, Safari без оптимизации */
    display: -webkit-flex; /* оптимизация для Safari */
    -webkit-justify-content: space-between; /* оптимизация для Safari */
    display: flex;
    justify-content: space-between;
	text-align: justify; /* IE10-, Firefox 12-22 */
	text-align-last: justify; /* IE10-, Firefox 12-22 */
    /*text-justify: newspaper; /* IE7- */
    /*zoom: 1; /* IE7- */
}

.menu__item{
    display: inline-block;    
    display: -webkit-box; /* !хак! для Android 4.3-, должен идти после inline-block */
    text-align: left;
    padding: 10px 0;
    /*display: inline;  /* IE7- */
    /*zoom: 1; /* IE7- */
}

.menu__link{
    font-family: Arial;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

.menu{

background: #666;

display: -webkit-box; /* Android 4.3-, Safari без оптимизации */

-webkit-box-pack: justify; /* Android 4.3-, Safari без оптимизации */

display: -webkit-flex; /* оптимизация для Safari */

-webkit-justify-content: space-between; /* оптимизация для Safari */

display: flex;

justify-content: space-between;

text-align: justify; /* IE10-, Firefox 12-22 */

text-align-last: justify; /* IE10-, Firefox 12-22 */

/*text-justify: newspaper; /* IE7- */

/*zoom: 1; /* IE7- */

}

.menu__item{

display: inline-block;

display: -webkit-box; /* !хак! для Android 4.3-, должен идти после inline-block */

text-align: left;

padding: 10px 0;

/*display: inline; /* IE7- */

/*zoom: 1; /* IE7- */

}

.menu__link{

font-family: Arial;

font-size: 16px;

color: #fff;

text-decoration: none;

}