前端工程学习日记２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;}