0

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: rgba(47, 60, 255, 0.49)
}

.container {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
}

nav {
  display: flex;
  background: #303f62;
  height: 150px;
  width: 100%;
}

ul {
  display: flex;
  padding: 0;
  height: 125px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 15px;
}

.left img {
  margin-left: 15px;
}

.right {
  margin-top: 0px;
  margin-left: auto;
  margin-right: 10%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="about_us.css">
</head>

<body>
  <div class="container">
    <div class="wrapper">
      <nav>
        <div class="left">
          <img src="images/logo.jpg" height="100" alt="">
        </div>
        <div class="right">
          <ul>
            <a class="on">Главная</a>

            <a>О нас</a>
            <a>Контакты</a>
            <a>Партнеры</a>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</body>

</html>

Почему navbar не растягивается на всю ширину контейнера? Я задал ему 100% ширину, но это не сработало. В чем причина?

0

1 ответ 1

0

По-умоланию, элементы внутри флекс контейнера занимают минимально возможную ширину, достаточную для того, чтобы поместился контент. По-этому пункты меню получаются сжаты. Если вы хотите, чтобы элемент div.right растянулся на доступную ширину, то нужно ему задать свойство flex-grow: 1; , разрешить расти. Собственно, в вашем случае, не важно, какое значение задать для flex-grow , главное, чтобы оно было больше или равно 1. Фрагмент кода будет таким:

.right {
  margin-top: 0px;
  margin-right: 10%;
  flex-grow: 1;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.