3

Пытаюсь сделать домашнее задание по макету и не могу сделать main-menu по центру, а architec-logo в виде <a><a/> слева, как показано тут.

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 30px;
}

a {
  text-decoration: none;
}

.main-header {
  background-color: #313131;
  display: flex;
}

.architect-logo {
  justify-content: flex-start;
}

.logo {
  color: white;
  font-size: 22px;
  text-transform: uppercase;
}

.main-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  text-transform: uppercase;
  color: #ffffff;
}

.main-menu-item {
  font-size: 15px;
  line-height: 20px;
}

.header-main {
  height: 337px;
  width: 1263px;
  background-image: url(/images/header-bg.jpeg);
}
<header class="main-header">
  <div class="architec-logo">
    <a href="#" class="logo">Arcitec</a>
  </div>
  <nav class="main-manu">
    <ul class="main-menu">
      <li class="main-menu-item">Home</li>
      <li class="main-menu-item">Architecture design</li>
      <li class="main-menu-item">Strange buildings</li>
      <li class="main-menu-item">Magszine</li>
      <li class="main-menu-item">Blog</li>
      <li class="main-menu-item">News</li>
    </ul>
  </nav>
</header>

1 ответ 1

2

Что бы сделать такое на Flex потребуется задействовать дополнительный элемент-болванку, но он понадобиться только если есть необходимость выровнять само меню строго по центру с учетом логотипа, более подробно я уже рассматривал этот момент здесь:

Flex-box как игнорироваться родительский justify-content?

Рабочий пример на основе Вашего кода:

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 22px;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #313131;
}

.architec-logo {
  margin-right: auto;
}

.logo {
  display: block;
  color: white;
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
}

.main-menu > ul {
  display: flex;
  list-style: none;
  text-transform: uppercase;
  color: #ffffff;
  padding: 0;
}

.main-menu li {
  margin-right: 10px;
}

.main-menu-item {
  font-size: 8px;
  line-height: 20px;
}

.header-main {
  height: 337px;
  width: 1263px;
  background-image: url(/images/header-bg.jpeg);
}

.hidden-logo {
  visibility: hidden;
  margin-left: auto;
}
<header class="main-header">
  <div class="architec-logo">
    <a class="logo">Arcitec</a>
  </div>
  <nav class="main-menu">
    <ul>
      <li class="main-menu-item">Home</li>
      <li class="main-menu-item">Architecture design</li>
      <li class="main-menu-item">Strange buildings</li>
      <li class="main-menu-item">Magszine</li>
      <li class="main-menu-item">Blog</li>
      <li class="main-menu-item">News</li>
    </ul>
  </nav>
  <div class="hidden-logo">
    <a class="logo">Arcitec</a>
  </div>
</header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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