How to align multiple items inside an element-CodePudding

I want to align diffrent items within one element! I tried to give the Element an flexbox and adjust the items themselv inside! but it don't responde properly ! The List Items should be aligned in a row, left-links on the left side and right-links on the right side! Logo should be in the center!


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Header</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div >
      <div >
        <ul>
          <li><a href="#">ONE</a></li>
          <li><a href="#">TWO</a></li>
          <li><a href="#">THREE</a></li>
        </ul>
      </div>
      <div >LOGO</div>
      <div >
        <ul>
          <li><a href="#">FOUR</a></li>
          <li><a href="#">FIVE</a></li>
          <li><a href="#">SIX</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>


.header  {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  align-items: center;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

.header .left-links {
  display: flex;
  justify-content: flex-start; //I tried justify-items also, but it doesn't help!
  flex-direction: row;
}

.header .logo {
  display: flex;
  justify-content: center;
}

.header .right-links {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}

//I tried justify-items also, but it doesn't help!

CodePudding user response：

You need to apply flex properties to ul

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

For the Items to be on the side on the screen and the logo center, you just need to set the header to justify-content: space-between

Here is the full list of what you need to change

  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

CodePudding user response：

I think if I understood you correctly the ul is the parent. Asign display flex on it since it's the parent.