Равномерное распределение блоков на всю ширину

Часто при верстке необходимо равномерно распределить какие либо блоки или элементы на все ширину, при создании меню, галереи и тд. Вот небольшой пример как это можно сделать.

Сначала идет внешний блок .wrap

<div class="wrap">
</div>

Внешний элемент не обязательно должен быть div, он может быть и списком или тег-контейнером(main section header footer...)

Затем идут сами элементы. В данном случае это просто divы, но и тут могут быть почти любые элементы(a li img...)

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Теперь CSS. Основное свойство для контейнера это text-align: justify

.wrap {
  text-align: justify;
}

А все элементы делаем inline-block

.wrap div{
  display: inline-block;
}

Если оставить так как есть сейчас, то у нас в одну строку элементы вообще работать не будет а в несколько строк будет работать все кроме последней строки. По этому добавляем следующий код:

.wrap:after {
  display: inline-block;
  content: "";
  width: 100%;
}

Демо пример:

See the Pen CydfI by roma (@romasport) on CodePen.

  • Не человек, а человечище! :) Спасибо вам огромное, вы мне столько геморроя упразднили, вы себе даже не представляете! :)

  • Владимир Коптелов

    Спасибо большое! Для тех компьютеров и браузеров где не работает flex box хоть какое-то верное решение!