前端工程学习日记２7天 header menu 三栏式 flex

在 .menu
display:flex 从左到右
Flex 里头还可以包 Flex - 程序码开发

<div class="header">
  <a class="logo" href="#"><img src="https://i.imgur.com/vZsGvLi.png" alt="hexschoollogo"></a>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关於六角</a></li>
    <li><a href="#">问与答</a></li>
  </ul>
</div>

*{
  outline:1px solid #000;
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  width: 650px;
  margin: 0 auto;
  border:1px solid #000;
}  
.logo,.menu{
  
}
.menu{
  display:flex;
  justifiycontent:flex-start;
  width: 210px;
  text-align: center;
  background: gray ;
  justify-content:space-between;
}
.menu li a {
  background: gray;
  color:#fff;
  display:block;
  text-decoration:none;
  padding: 10px;
  padding-bottom: 10px;
}
.menu li a:hover{
  background: blue;
  color:#00ffa2;
}