flex实现的导航

<html>
 
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
         
            * {
                margin: 0;
                padding: 0;
            }
         
            #test{
            background-color:#C2EDFF;
            display:flex;
            flex-direction:row-reverse;
            justify-content:center;
              user-select:none;
             
            }
     
         
            .box {
                height:80px;
                width:200px;
                border-radius: 25px;
                background-color:#F0F8FF;
                text-align:center;
                margin:10px;
                align-items:center;
                display:flex;
                justify-content:center;
                flex-wrap:wrap ;
                align-content:center;
            }
             
            .box p{
                font-size:20px;
            }
        </style>
 
 
<body>
<div id ="test">
 
<div class='box'><p>首 页</p></div>
<div class='box'><p>最 新</p></div>
<div class='box'><p>最 新</p></div>
<div class='box'><p>关 于</p></div>
 
</div>
 
 
 
</body>
 
</html>