1

tengo un problema con flexbox al maquetar un sitio web.

El problema es el siguiente: al utilizar justify-content: space-between; todas mis caja quedan pegadas pero si les agrego un margin-right: 1px; esta se posicionan correctamente.

Cabe destacar que utilizo el framework Bulma, pero no interfiere en mi codigo

no puedo encontrar el error.

// Trabajos
    .contenedor-trabajos {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .trabajo {
            width: 25%;
            margin-bottom: 40px;
            .thumb {
                width: 100%;
                margin-bottom: 40px;
                img {
                    vertical-align: top;
                    width: 100%;
                    border-radius: 3px;
                }
            }

            .descripcion {
                text-align: center;
            }
        }
    }
    // Fin trabajos

Este es el problema Quiero destacar que utilizo el framework bulma.

1 respuesta 1

0

Tal y como está el código, la visualización en el navegador es correcta: flex-wrap: wrap; genera el salto de línea y justify-content: space-between; distribuye los elementos aprovechando el ancho completo del contenedor, de tal manera que, como en tu caso, al haber solo dos elementos en la última línea, el primero estará al principio de esta y el último al final.

Cuando pones un margin-right a cada bloque, esto hace que para el contenedor ocupen más del 25% que le habías indicado, de tal manera que el cuarto elemento, al no tener espacio en la línea, 'baja' a la siguiente.

Al ocurrir esto, tienes los mismos elementos en cada línea y como comentaba antes el justify-content: space-between; los distribuye a lo largo del contenedor, de tal manera que te genera una falsa sensación de estar posicionados correctamente.

Si quieres hacer un grid de trabajos, yo te recomendaría que utilizases el sistema de filas/columnas con la que ya cuenta Bulma (https://bulma.io/documentation/columns/) que te ahorrará todo este trabajo.

Si aún así prefieres hacerlo a mano, lo único que tendrías que hacer es mantener el código tal y como lo has puesto aquí eliminando la línea justify-content: space-between;. De este modo, conseguirás que los cuatro primeros elementos aparezcan en la primera línea y los dos siguientes en la segunda, pero ambos pegados a la parte izquierda.

Tu Respuesta

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

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