1

Estoy intentando alinear muchos divs hijos dentro de una sola columna, uno debajo de otro, para recorrerlos con un scroll. El problema es que al intentarlo con flex-direction:column; se alinean pero se deforman. Y si le agrego un flex-wrap:wrap; se alinean horizontalmente en dos filas. A continuacion el codigo

Codigo HTML:

<div id="divcontent" class="divcontent">
                
                <div class="objeto">
                    
                    <img src="https://picsum.photos/200/120">
                    <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                </div>

                <div class="objeto">
                    
                    <img src="https://picsum.photos/200/120">
                    <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                </div>

                <div class="objeto">
                    
                    <img src="https://picsum.photos/200/120">
                    <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                </div>

                <div class="objeto">
                    
                    <img src="https://picsum.photos/200/120">
                    <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                </div>

                <div class="objeto">
                    
                    <img src="https://picsum.photos/200/120">
                    <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                </div>
</div>

CODIGO CSS:

.divcontent{

    margin:50px;
    overflow-y:scroll;
    width:90%;
    height:90%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    flex-wrap:wrap;
}

.objeto{

    width:200px;
    height:120px;
    background:#12203e;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    margin:20px;
}

Si ven que dentro del objeto hay un position relative y demas es para posicionar correctamente el div con el

3
  • El scroll quiero que sea verticalmente, pero se pone horizontalmente. Lo que sucede cuando se deforma es que no respeta su ancho y alto, sino que se achican para ocupar todo el ancho y alto entre todos los objetos y su margen
    – mirkete
    el 12 feb. 2021 a las 1:09
  • el texto y la imagen quedan bien, queda la imagen detras y el texto adelante con el div, el problema es que no logro acomodarlos en una sola columna, se pueden adjuntar fotos? asi se entiende mejor
    – mirkete
    el 12 feb. 2021 a las 2:09
  • Ahi agregue una para que se entienda mas facilmente como es que se ve
    – mirkete
    el 12 feb. 2021 a las 2:13

2 respuestas 2

1

Comentarios:

  • Me parece que para este caso flexbox ni siquiera es necesario (pues estás buscando un acomodo de elementos que con sus propias características puedes lograr)
  • Los divs que están conteniendo a tu imagen y titulo son elementos en bloque por tanto van a quedar uno sobre otro
  • El texto del titulo se centra tan fácil como colocar un text-align-center

Con lo anterior se consigue el objetivo y se reduce la cantidad de código empleado

Código de ejemplo:

        <style>
          .divcontent {
            border: 1px solid;
            overflow-y: scroll;
            height: 500px;
            width: 50%;
            margin: 0 auto;
          } 
          
          .objeto{
            text-align: center;
        }
        </style>
        <div id="divcontent" class="divcontent">
                        
                        <div class="objeto">
                            
                            <img src="https://picsum.photos/200/120">
                            <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                        </div>
        
                        <div class="objeto">
                            
                            <img src="https://picsum.photos/200/120">
                            <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                        </div>
        
                        <div class="objeto">
                            
                            <img src="https://picsum.photos/200/120">
                            <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                        </div>
        
                        <div class="objeto">
                            
                            <img src="https://picsum.photos/200/120">
                            <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                        </div>
        
                        <div class="objeto">
                            
                            <img src="https://picsum.photos/200/120">
                            <div class="divh4"><h4>Catalogo Jah Jireh</h4></div>
                        </div>
        </div>

0

Acabo de solucionarlo, solo tuve que quitar el flex-direction:column; aunque sigo sin entender porque esto lo soluciono. Muchas gracias @BetaM por la ayuda!

1
  • 1
    No añadas "gracias" como respuesta, si la respuesta de @BetaM te ayudó a llegar a la solución puedes aceptar su respuesta. Pero, si solucionaste el problema de otra manera, añade el código que usaste para llegar a la solución. Saludos. el 12 feb. 2021 a las 2:29

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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