Изучаю flexbox, в шапке есть 2 блока, один блок надо прижать влево, а другой вправо и между пунктами что бы были отступы, я это сделал, годится ли этот код, как сделать лучше?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title></title>
<style>
ul {
list-style: none;
border: 1px solid;
}
header {
border: 1px solid;
}
header {
display: flex;
}
.left-block ul, .right-block ul {
display: flex;
}
.left-block {
order: 1;
}
.right-block {
order: 2;
margin-left: auto;
}
.left-block li, .right-block li {
margin-right: 10px;
}
</style>
</head>
<body>
<header>
<div class="left-block">
<ul>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
</ul>
</div>
<div class="right-block">
<ul>
<li><span>Текст</span></li>
<li><button>Войти</button></li>
<li><a href="">Ссылка</a></li>
</ul>
</div>
</header>
</body>
</html>
Средний
