alinear menu con flexbox en linea no lo consigo.

[trevol]

Hola amigos, resulta que quiero alinear el menú que a continuación os pongo en linea, es decir un
item al lado del otro, pero no hayo la manera en su lugar se me ponen los items debajo y no es lo que quiero. Gracias. Dejo código a ver si alguien me da una idea.

Código HTML:

<div class = "menu">
            <ul>
                        <div><li><a class="active"  href="index.html">inicio</a></li></div>
                        <div><li><a href="avgfree.html">avg free</a></li></div>
                        <div><li><a href="interface.html">interface</a></li></div>
                        <div><li><a href="conclusiones.html">concluciones</a></li>
                        </div>
                    </ul>
        
            </div>
 

Código CSS:

.menu{
        display:flex;
        flex-flow: row wrap;
     justify-content: center;
       margin-top:0px;
        width: 100%;
         height:60px;
        border: 1px solid green;
        background:black;
        }
        
    
        
        
        .menu li{
        display:flex;
        
        
        position:relative;
        text-decoration:none;
        list-style:none;
        margin-top: 0px;
        margin-left: 0px;
        text-align: center;
        }
 
        
        .menu li a{
    
        color:yellow;
        text-decoration:none;
        font-size:25px;
        display:block;
        padding:15px 82px;
        }
        
        .menu li a:hover{
            padding:15px 82px;
                    
            background-color: blue;
        }
 

La idea es hacerlo con flexbox.