Растянуть меню на всю ширину

Question

Вот разметка:

.main_nav_wrapp {
  background-color: #004a9e;
}

.main_row {
  max-width: 1240px;
  margin: 0 auto;
}

.main_nav {
  display: flex;
  display: -webkit-flex;
  outline: 1px solid red;
}

.main_nav li {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  text-align: center;
}

.main_nav li a {
  display: block;
  flex: 1;
  -webkit-flex: 1;
  padding: 17px 38px;
  outline: 1px solid red;
}

<div class="main_nav_wrapp" id="resp_nav">
  <div class="main_row">
    <ul class="main_nav">
      <li><a href="#"><span>О компании</span></a></li>
      <li><a href="#"><span>Услуги</span></a></li>
      <li><a href="#"><span>Алгоритм работы</span></a></li>
      <li><a href="#"><span>Каталоги</span></a></li>
      <li><a href="#"><span>Полезная информация</span></a></li>
      <li><a href="#"><span>Медиа-центр</span></a></li>
      <li><a href="#"><span>Контакты</span></a></li>
    </ul>
  </div>
</div>

Получается вот так

На картинке видно что справа есть пустое место. Нужно чтобы все пункты меню растянулись по всей ширине меню так, чтобы между ними не было отступов. Как это сделать?

Answer 1

Подстройте этот пример под свои стили:

ul.full-width {
  width: 100%;
  /* Ширина основного блока меню */
  height: 50px;
  /* Высота основного блока меню */
  position: relative;
  display: table;
  margin: 0;
  padding: 0;
}

ul.full-width li {
  display: table-cell;
  position: relative;
}

ul.full-width li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #FFF;
  line-height: 50px;
  /* Приравниваем к высоте, чтобы выровнять текст по вертикали */
}

ul.full-width li ul {
  display: none;
  /* Скрываем выпадающее меню */
  position: absolute;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

ul.full-width li ul li {
  display: block;
}

ul.full-width li:hover ul {
  display: block;
  /* Показываем выпадающее меню, где оно есть, при наведении */
}

<ul class="full-width">
  <li>
    <a href="#">О компании</a>
    <li class="active"><a href="#">Услуги</a></li>
    <li><a href="#">Технологии</a></li>
    <li><a href="#">Проекты</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

Answer 2

Должного эффекта можно добиться с помощью свойства justify-content.

Для начала отмечу, что в данных стилях, которые ранее использовались для центрирования списка вкладок, надобности больше нет:

.main_row {
    max-width: 1240px;
    margin: 0 auto;
}

В принципе сам блок .main_row можно убрать, но тут уже на ваше усмотрение, может быть он вам нужен.

Теперь к сути. Я бы прибег к следующему варианту: justify-content: stretch для родителя (ul) и flex-grow: 1 для потомков (li).

Ваш пример с соответствующими изменениями:

.main_nav_wrapp {
  background-color: #004a9e;
}

.main_row {
  /* это больше не нужно */
  /* max-width: 1240px; */
  /* margin: 0 auto; */
}

.main_nav {

  justify-content: stretch; // и раз

  display: flex;
  display: -webkit-flex;
  outline: 1px solid red;
}

.main_nav li {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  text-align: center;

  flex-grow: 1; // и двас

}

.main_nav li a {
  display: block;
  flex: 1;
  -webkit-flex: 1;
  padding: 17px 38px;
  outline: 1px solid red;
}

<div class="main_nav_wrapp" id="resp_nav">
  <div class="main_row">
    <ul class="main_nav">
      <li><a href="#"><span>О компании</span></a></li>
      <li><a href="#"><span>Услуги</span></a></li>
      <li><a href="#"><span>Алгоритм работы</span></a></li>
      <li><a href="#"><span>Каталоги</span></a></li>
      <li><a href="#"><span>Полезная информация</span></a></li>
      <li><a href="#"><span>Медиа-центр</span></a></li>
      <li><a href="#"><span>Контакты</span></a></li>
    </ul>
  </div>
</div>

flex-grow: 1 необходим для правильной работы stretch и является своего рода множителем определяющим насколько элемент больше своих соседей (попробуйте поставить flex-grow: 10 только первому li, посмотрите, что выйдет).

Также замечу, что отступ слева создаёт ul, у него по дефолту есть padding

UPD: Немного невнимательно прочитал, если вам нужно, чтобы элементы меню растянулись не по всей странице, а только внутри блока .main_row, тогда его стиль убирать не нужно

БЛОГ НА HUSL

Растянуть меню на всю ширину

Ответы (2 шт):