我想在一個元素內對齊不同的項目！我嘗試給 Element 一個彈性盒並自行調整裡面的項目！但它沒有正確響應！列表項目應排成一行，左連結在左側，右連結在右側！徽標應位於中心！
<!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;
}
//我也嘗試了 justify-items，但沒有幫助！
我想如果我理解正確的話，
ul是父級。將display: flex指派給它，因為它是父級。您需要將 Flex 屬性套用到
ulul { display: flex; flex-direction: row; flex-wrap: wrap; }要讓 Items 位於螢幕側面和標誌中心，只需將 header 設定為
justify-content: space- Between這是您需要更改的完整清單
.header { display: flex; flex-direction: row; justify-content: space-between; } ul { display: flex; flex-direction: row; flex-wrap: wrap; }