Выровняйте мои гибкие элементы слева, по центру и справа

Question

Я хотел, чтобы панель навигации находилась справа вверху, чтобы класс располагался слева слева, класс - посередине справа в середине, а класс справа - справа.

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

.flex-container {
  width: 100%;
}

.flex-container ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-container li {
  border: 1px solid red;
}

.flex-container nav ul .nytl {
  width: 189px;
  height: 26px;
}

.flex-container nav ul .first {
  justify-content: flex-start;
}

hr {
  margin-top: 10px;
}

<div class="flex-container">
  <nav>
    <ul>
      <li class="left">
        <a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
        </a>
      </li>
      <li class="left">
        <a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
        </a>
      </li>
      <li class="left"><a href="#">SPACE & COSMOS</a>
      </li>
      <li class="middle"><img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl"></li>
      <li class="right"><button>Subscribe</button> .
      </li>
      <li class="right"><button>Login</button></li>
    </ul>
  </nav>
  <hr>
</div>

Answer 1

Попробуйте использовать поля auto, чтобы отодвинуть левый и правый элементы от среднего элемента.

(Кроме того, поскольку вы используете элемент HTML5 nav и свойства CSS3, вы действительно неДля структурирования макета не требуется ul. Вы можете существенно упростить код.)

nav {
  display: flex;
  align-items: center;
}

nav > * {
  border: 1px solid red;
}

.nytl {
  margin: 0 auto;
  width: 189px;
  height: 26px;
}

hr {
  margin-top: 10px;
}

* {
  padding: 0;
  margin: 0;
}

<nav>
  <a href="#">
    <img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
  </a>
  <a href="#">
    <img src="https://img.icons8.com/material-rounded/16/000000/search.png">
  </a>
  <a href="#">SPACE & COSMOS</a>
  <img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
  <button>Subscribe</button>
  <button>Login</button>
</nav>
<hr>

Подробнее о полях auto можно узнать здесь:

• Почему в CSS Flexbox нет "justify-Свойства items "и" justify-self "?

Вот еще один гибкий метод, который может оказаться полезным:

• Выравнивание трех делений по горизонтали с помощью Flexbox

Теперь вы можете столкнуться с другой проблемой: Поскольку гибкие функции, такие как auto поля, justify-content и align-items, работают за счет распределения свободного пространства, ваш средний элементне может быть идеально отцентрирован.См. Эти сообщения для получения дополнительной информации и решений:

• Держите средний элемент по центру, когда боковые элементы имеют разную ширину
• Центрируйте и выровняйте по центру элементы flexbox вправо

Answer 2

Я бы использовал опцию space-between, которую flex приносит со свойством justify-content.Вы должны быть осторожны с тем, как код указан для целей SEO, а не размещать где-либо, и вы должны css переместить все это.Сначала он должен каскадироваться в естественном порядке.

.flex-thirds {
  display: flex;
  justify-content: space-between;
}

.flex-thirds .col {
  width: 32%;
}

.nytl {
  margin: 0 auto;
  width: 189px;
  height: 26px;
}

<div class="flex-thirds">
  <div class="col">
    <a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
    </a>
    <a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
    </a>
    <a href="#">SPACE & COSMOS</a>
  </div>
  <div class="col">
    <img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
  </div>
  <div class="col">
    <button>Subscribe</button>
    <button>Login</button>
  </div>
</div>

Подробнее о justify-content вы можете узнать здесь css-tricks