Trying to recreate the Google landing page using flexbox

Question

I'm trying to recreate the nav bar at the top of the google landing page using flexbox, but I'm pretty confused as to how it works. I can't seem to get some of the content to the right of my nav bar, and the other content to the left. My #items are my ul of content for the nav bar, and .left and .right are the respective content that I want to move around, currently, everything is just squished together on the left. Here is my 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>

And here is my 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;
}

There's no `justify-self` in flexbox. Those rules are just being ignored. Use `justify-content` or auto margins. https://stackoverflow.com/q/32551291/3597276 — Michael Benjamin, May 06 '20 at 23:43
In addition to what @Micheal Benjamin said, ```align-self``` is used to align a single element vertically. — booluw, May 07 '20 at 03:05

score 0 · Answer 1 · answered Mar 22 '22 at 09:22

A better way to do this is instead of putting all of your items in one list put them in two separate lists and then style them individually like this:
HTML:

    <nav>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Store</a></li>
      </ul>

      <ul>
        <li><a href="#">Gmail</a></li>
        <li><a href="#">Images</a></li>
        <button class="sign-in">Sign In</button>
      </ul>
    </nav>

CSS:


nav {
  display: flex;
  justify-content: space-between;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  margin-left: 25px;
  margin-right: 25px;
}

nav ul {
  margin-top: 15px;
}

nav a,
i {
  text-decoration: none;
  display: block;
  padding: 0.5em;
  color: #000;
  opacity: 0.75;
  margin-left: 5px;
}

nav a {
  font-size: 13px;
}

.sign-in {
  font-weight: bold;
  font-size: 13px;
  border: 1px solid #4285f4;
  background: -webkit-linear-gradient(top, #4387fd, #4683ea);
  color: white;
  cursor: pointer;
  border-radius: 2px;
  width: 70px;
  margin-left: 10px;
}

Trying to recreate the Google landing page using flexbox

1 Answers1