Flex布局实例2：自适应导航栏

作者: lijaha | 来源:发表于2017-05-09 20:31 被阅读0次

<!DOCTYPE html>
   <html>
      <head>
        <style type="text/css">
          .box{
             margin:0px;
             background-color:deepskyblue;
             display:flex;
             flex-flow:row wrap;
             justify-content:flex-end;
             list-style:none;
          }
          .box a{
              text-decoration:none;
             display:block;
             color:white;
             padding:1em;
          }
          .box a:hover{
             background-color:#00AEE8;
          }
          @media all and(max-width:800px){
             .box{
                  justify-content:space-around;
             }
          }
          @media all and(max-width:600px){
             .box{
                  flex-flow:column nowrap;
                  padding:0;
             }
             .box a{
                  text-align:center;
                  padding:10px;
                  border-bottom:1px solid rgba(0,0,0,0.1);
             }
             .box li:last-of-type a{
                  border-bottom:0px;
             }
        }
         </style>
      </head>
      <body>
         <ul class="box">
            <li><a href="#">Home</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Connect</a></li>
            <li><a href="#">About</a></li>
          <ul>
      </body>
    </html>

大屏：