2
respostas

Duvida flex-grow

Pessoal,

Notei que há um espaço livre dentro da section videoSobre e eu queria que esse espaço fosse doado ao button, porque no mobile eu tô achando ele muito colado com as LIs, porém ao colocar flex-grow: 1; que pelo que eu entendi, todo esse espaço que está sobrando iria para o elemento que recebe essa propriedade, não funciona...

Alguma ideia?

2 respostas

Oi, Igor, tudo bem?

Eu precisaria do teu código para testar e vizualizar melhor o cenário. Você poderia disponilizar?

Vi que no outro tópico você compartilhou o trecho do código da parte responsiva, mas seria legal ter o restante. Se puder colocar no github seria ótimo :} Aguardo!

Oi, Laís! Tudo bem? Obrigado pela ajuda, segue:

@media (min-width: 800px) {

    .cabecalhoPrincipal .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cabecalhoPrincipal-nav {
        display: flex;
    }

    .rodapePrincipal-patrocinadores .container {
        display: flex;
        justify-content: space-between;
    }

    .rodapePrincipal-patrocinadores-list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 70%;
        margin-right: 5%;
    }

    .rodapePrincipal-contatoForm {
        width: 25%;
    }

    .rodapePrincipal-contatoForm-fieldset {
        display: flex;
        }

    .rodapePrincipal-navMap-list {
        display: flex;
        /*flex-direction: column;
        flex-wrap: wrap;*/
        flex-flow: column wrap;
        height: 250px;
    }

    .conteudoPrincipal-cursos {
        display: flex;
        flex-wrap: wrap;

    }

    .conteudoPrincipal-cursos-link {
        width: 23%;
        margin: 1%;
    }

    .conteudoPrincipal-cursos-link: nth-child(4n) {
        margin-right: 0;
    }

    .conteudoPrincipal-cursos-link: nth-child(4n+1) {
        margin-left: 0;
    }

    .videoSobre .container {
        display: flex;    
    }

    .videoSobre-sobre {
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-grow: 2;
    }

    .videoSobre-sobre-list {
        flex-grow: 1;
    }

    .videoSobre-video {
        flex-grow: 1;
        flex-shrink: 2;
    }
}


/** parte mobile **/
@media(max-width: 768px) {

    .cabecalhoPrincipal .container {
        flex-direction: column;
        justify-content: space-between;
        align-items: initial;
        text-align: center;
    }

    .cabecalhoPrincipal-nav {
        flex-direction: column;
        font-size: 1.2em;
    }

    .cabecalhoPrincipal-nav-link-app {
        order: -1;
    }

    .conteudoPrincipal-cursos {
        flex-direction: column;
    }

    .conteudoPrincipal-cursos-link {
        width: 100%;
    }

    .rodapePrincipal-navMap-list {
        text-align: center;
        font-size: 1.2em;
        height: auto;
    }

    .videoSobre .container {
        flex-direction: column;
        justify-content: space-between;

    }

    .videoSobre-video {
        margin: 0 auto;
    }

    .videoSobre-sobre {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        }

    .videoSobre-button {
        font-size: 1.2em;
        flex-grow: 2;
        margin: 0;
    }

    .rodapePrincipal-patrocinadores .container {
        flex-direction: column;
        align-items: center;
    }

    .rodapePrincipal-patrocinadores-list {
        width: 100%;
        margin: 0;
    }

    .rodapePrincipal-contatoForm {
        width: 100%;
    }

    .rodapePrincipal-contatoForm-fieldset {
        justify-content: center;
    }

}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software