Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » No funciona flex direction

CSS - No funciona flex direction

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

No funciona flex direction

Publicado por Pedro (2 intervenciones) el 08/09/2022 14:04:18
Buenos dias. Estoy intentado hacer un pequeño menu lateral con css. Quiero que este en forma de columna, pero por mas que le pongo flex-direction: column; y pruebo varias cosas, siempre sale en horizontal, como si esa propiedad no se aplicara. Este es el html al que le quiero aplicar el css.
1
2
3
4
5
6
7
8
9
10
<div class="navegador">
        <nav>
            <ul>
                <a class="link" target="_blank" href="">Link-1</a>
                <a class="link" target="_blank" href="">Link-2</a>
                <a class="link" target="_blank" href="">Link-3</a>
                <a class="link" target="_blank" href="">Link-4</a>
            </ul>
        </nav>
        </div>

Y este es el CSS que no consigo hacer funcionar.

1
2
3
4
5
6
7
8
9
10
.navegador{
 
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: stretch;
    background-color: chartreuse;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

No funciona flex direction

Publicado por Ivan (45 intervenciones) el 08/09/2022 18:54:53
Hola,

En realidad si funciona, pero tienes mal la estructura del menú y no se ve.
Cuando defines un contenedor flex automáticamente sus hijos directos se convierten en items flex, estos hijos son <nav> y <ul>.
Como has colocado los enlaces <a> (que son elementos en linea) dentro de <ul> pues no les afecta el flex.

De modo que debes hacer que tu contenedor flex sea el <ul> y los enlaces los colocas dentro de <li> (forma habitual de crear menús).
He añadido list-style: none y padding: 0 para eliminar el estilo por defecto de las listas.

Tu código quedaría algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  .navegador {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    align-content: stretch;
    background-color: chartreuse;
    list-style: none;
    padding: 0;
  }
  </style>
</head>
 
<body>
  <nav>
  <ul class="navegador">
    <li><a class="link" target="_blank" href="">Link-1</a></li>
    <li><a class="link" target="_blank" href="">Link-2</a></li>
    <li><a class="link" target="_blank" href="">Link-3</a></li>
    <li><a class="link" target="_blank" href="">Link-4</a></li>
  </ul>
  </nav>
</body>
</html>

Personalmente veo las propiedades de flex con mucha más utilidad en horizontal, porque distribuye los anchos automáticamente y eso puede resultar muy útil para centrar elementos.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

No funciona flex direction

Publicado por Pedro (2 intervenciones) el 08/09/2022 22:07:42
Muchas gracias, ahora si funciona.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar