我正在尝试得到链接到页面的右侧和徽标留在左侧使用flex Box。我在.main-nav上尝试了justify-content：flex-end；，但什么也没有发生。
null
* {
box-sizing: border-box;
}
.header {
display: flex;
width: 100%;
background: green;
}
.main-nav {
display: flex;
}
.main-nav li {
text-align: right;
}<header class="header">
<h1 class="logo"><a href="#">Flexbox</a></h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>null
给出.main-nav):
margin-left: auto;
null
* {
box-sizing: border-box;
}
.header {
width: 100%;
background: green;
}
.main-nav {
display: flex;
justify-content:flex-end;
}
.main-nav li {
text-align: right;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<!-- <script src="main.js"></script> -->
</head>
<body>
<header class="header">
<h1 class="logo"><a href="#">Flexbox</a></h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>