Попытка воссоздать целевую страницу Google с помощью flexbox - PullRequest
Новая
       3

Попытка воссоздать целевую страницу Google с помощью flexbox

0 голосов
/ 07 мая 2020

Я пытаюсь воссоздать панель навигации в верхней части целевой страницы Google с помощью flexbox, но меня очень смущает, как это работает. Кажется, я не могу разместить часть содержимого справа от панели навигации, а другое содержимое - слева. Мои #items - это мой ul содержимого для панели навигации, а .left и .right - это соответствующий контент, который я хочу переместить, в настоящее время все просто сжато слева. Вот мой HTML: 

    <html>
  <head>
    <meta charset="UTF-8" />
    <title>Google Page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <!-- CODE HERE-->
    <nav class="navbar">
      <ul id="items">
        <li class="left">About</li>
        <li class="left">Store</li>
        <li class="right">Gmail</li>
        <li class="right">Images</li>
      </ul>
    </nav>
  </body>
</html>

А вот мой CSS: 

body {
  background-color: white;
  padding: 0;
  margin: 0;
}

#items {
  list-style-type: none;
  display: flex;
}

.left {
  justify-self: flex-start;
}

.right {
  justify-self: flex-end;
}
...