Горизонтальное выравнивание блоков по ширине строки

27 мая 2017 | CSS

С появлением модели Flexbox значительно упростилась задача выравнивания блоков, в частности — горизонтального выравнивания блоков по ширине строки (например, для выравнивания пунктов меню).

Допустим мы имеем такую HTML-заготовку для меню:

<ul class="menu">
  <li class="item">О компании</li>
  <li class="item">Услуги</li>
  <li class="item">Лицензии</li>
  <li class="item">Фотогалерея</li>
  <li class="item">Контакты</li>
</ul>

И такой CSS-код, помогающий это меню лучше визуализировать.

.menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;  
  outline: 1px solid green;
}
.item {
  display: inline-block;
  background-color: yellow;
}

Пока пункты меню не выровнены по ширине.

Но стоит добавить всего пару строчек CSS и задача выравнивания решается.

//Решение с Flexbox
.menu {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;  
  outline: 1px solid green;
}
.item {
  display: inline-block;
  background-color: yellow;
}

Но иногда требуется решение без использования Flexbox, например, когда требуется поддержка IE. Выглядит это решение так:

// Решение без Flexbox
.menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;  
  outline: 1px solid green;
  text-align: justify;
  font-size: 0;
}
menu:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.item {
  display: inline-block;
  background-color: yellow;
  font-size: 16px;
}

Метки: css, flexbox, горизонтальное выравнивание

---