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.

[Rafael]

Hum Por lo pronto te pongo que no tiene sentido anidar cada li con un div.

Los li pueden ser si quieres de bloque o inline-block, como gustes. Así que de inicio quítalos.

Para un menú, yo no uso flexbox.

Con poner un

div.menu li {display: inline-block;}

es suficiente.

[BeikerxD]

Concuerdo con rafael en la parte de meter cada elemento li en un div, la regla que te dio el amigo rafael allí arriba te debería de servir muy bien, pero recuerda sacar los div porque sino creo que seguira aplicando el estilo de bloque a los elementos li que estan contenidos dentro del div que por defecto es block

Código HTML:

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

[trevol]

Gracias amigos, los div estaban ya quitados. probaré a ver coon inline-block

[pzin]

Con indicar en el padre display:flex tienes suficiente.

https://jsfiddle.net/chucq6mr/

El problema que tenías es que los elementos de la caja flexible en tu código era el elemento ul, porque cualquier hijo descendiente de un flexbox es una caja flexible.