'Trying to recreate the Google landing page using flexbox

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;
}
htmlcssflexbox


Solution 1:[1]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A.Taghavi

Related Questions