1
resposta

Espaço entre os elementos

Como é calculado o espaço entre o título e o menu? Eu consigo aumentar ou diminuir esse espaço?

1 resposta

Os tamanhos no flexbox são calculados usando porcentagens em relação a tela do usuário ou ao elemento em que os blocos estão inseridos.

Logo, se você tem 3 elementos e pede para fazer justify-content: space-between, o flexbox vai jogar os elementos do lado direito e esquerda para as bordas e o que sobrou no meio.

Como são porcentagens, você não consegue movimentar eles para a esquerda e direita se estiver usando o flexboxsem setar a propriedade flex-direction: column, mas você consegue mover eles para cima e para baixo utilizando a propriedade margin no pai

Então seria o seguinte, considerando o html abaixo


<! -- HTML -->
        <div class="titulo">
            <h1>UM TITULO</h1>
        </div>
        <div class="pai">
            <div class="filho"></div>
            <div class="filho"></div>
            <div class="filho"></div>
        </div>

E o CSS abaixo fica exemplificado

    .pai{
        display: flex;
        width: 100vw;
        justify-content: space-around;
        margin-top: 50px //funciona!
    }

    .filho{
        height: 100px;
        width: 100px;
        margin-left: 30px // pode fazer o elemento pular linha ou ficar "apertado" se o stretch estiver setado
    }