I want to align different items within one element! I tried giving Element a flexbox and adjusting the items inside it myself! But it doesn't respond correctly! The list items should line up in a row, with the left link on the left and the right link on the right! The 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 class="header">
<div class="left-links">
<ul>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<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 also tried justify-items, but it didn't help!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I think if I understand correctly,
ulis the parent. Assigndisplay: flexto it since it is the parent.You need to apply Flex properties to
ulul { display: flex; flex-direction: row; flex-wrap: wrap; }To position the Items on the sides of the screen and the logo in the center, just set the header to
justify-content: space- BetweenHere is the complete list of changes you need to make
.header { display: flex; flex-direction: row; justify-content: space-between; } ul { display: flex; flex-direction: row; flex-wrap: wrap; }