Как оперировать flex внутри одного блока, который тоже задан как display flex?

Question

Пытаюсь сделать домашнее задание по макету и не могу сделать 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>

Answer 1

Что бы сделать такое на 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>

БЛОГ НА HUSL

Как оперировать flex внутри одного блока, который тоже задан как display flex?

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