0

Ya apliqué el display:flex al padre contenedor, pero me sigue acomodando los ítems uno debajo del otro.

¿Alguien sabe qué puede ser?

.contenidos-menu {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
}
<div class="contenidos-menu">
  <!--ACA VAN LOS CONTENIDOS DE LAS MATERIAS-->
  <div>
    <a href="https://miel.unlam.edu.ar/">
      <i class="fas fa-book-open clasee"></i>
      <div class="texto-contenidos">Contenidos</div>
    </a>
  </div>
  <div>
    <a href="https://miel.unlam.edu.ar/">
      <i class="fas fa-file-alt clasee"></i>
      <div class="texto-contenidos">Prácticas</div>
    </a>
  </div>

2
  • El código que expones si funciona, ¿puedes revisar de nuevo?
    – user128299
    Commented el 9 abr. 2021 a las 17:51
  • Hola, Lucía. Funciona, pero que te siga mostrando los elementos uno debajo del otro significa que deberías recargarlo sin el caché. Puedes recargar presionando las teclas Ctrl + Shift + R que surta efecto lo que has intentado hacer. Commented el 9 abr. 2021 a las 18:01

2 respuestas 2

0

El error proviene de la propiedad flex-flow. Esta es una propiedad atajo que engloba las propiedades flex-direction y flex-wrap.

Esto quiere decir que la propiedad flex-direction que has usado queda anulada por la flex-flow ya que la flex-flow que has usado tan solo da valor a la propiedad flex-wrap, entendiendo como nula la flex-position.

Tan solo tienes que quitar la propiedad flex-flow y ya se ponen uno al lado del otro.

¡¡Aquí te dejo el enlace a la documentación para que aclares los conceptos!!

Flex-flow

Un saludo!

0

Buenas Lucia tal y como enseñas en el código habría dos formas de solucionar el error que te puede ocurrir.

Una de ellas seria usando la siguiente estructura:

.contenidos-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

O de la siguiente forma:

.contenidos-menu {
  display: flex;
  flex-flow: row wrap;

La propiedad flex-flow: es un atajo para las dos propiedades individuales flex-direction: y flex-wrap.

En esta página puedes informarte más sobre como trabaja esta propiedad.

https://developer.mozilla.org/es/docs/Web/CSS/flex-flow

1
  • El detalle es que si pruebas el código, el mismo funciona, entonces habría que ver si quien pregunta no tiene problemas derivados de caché
    – user128299
    Commented el 10 abr. 2021 a las 17:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.