Entrar Ainda não tem acesso?
7
respostas

FLEXBOX

por Murilo Pertinhez
| 6.9k xp | 10 posts

Pessoal, boa tarde tudo bem?

Eu estou com um pouco de dificuldade para executar o flexbox, na teoria é tudo lindo mas na prática nao estou conseguindo executar,

Estou fazendo uma pagina sobre mim onde tinha como ideia colocar meu nome no canto superior esquerdo e colocar algumas nav's na mesma linha só que separados do nome, por exemplo:

Colocar o nome no canto superior esquerdo e colocar o (sobre mim e skills) centralizado no meio da página.

e na parte de baixo da pagina colocar o conteúdo.

Eu tentei deixar esses 3 elementos em 1 só div e separa-los com o justfy-content mas o nome fica mais centralizado na parte do meio.

Estou com dificuldades para posicionar um elemento só especifico, alguém consegue me ajudar?

7 respostas
por Iury Gontijo Silva
| 247.7k xp | 320 posts

Fala, Murilo! Tudo bom?

Cara, dependendo da forma que você quer posicionar os elementos, colocar todos eles de uma única div não é tão interessante porque pode ficar limitado o que você pode fazer, usando a propriedade justify-content, por exemplo. Mas envia seu código depois pra gente, por favor, e deixa um pouco mais detalhado como você quer também que fique os elementos, que daí nós damos uma olhada e tentamos te ajudar melhor.

Abraços e bons estudos!

por Murilo Pertinhez
| 6.9k xp | 10 posts

Ainda não estilizei, a minha dificuldade no flexbox está sendo limitar o tamanho da pagina pra nao ficar esse espaço sobrando sabe? Consegui fazer o posicionamento de 1 elemento apenas colocando (position:relative) e a direção (right ou left) mas estou com muita dificuldade pra dominar o flexbox ainda. Isso é normal ? Sei que pra colocar tudo em seu devido lugar precisamos primeiro acertar as ordens dos elementos no html mas na hora de posicionar nao consigo pensar como uma DIV.

E no vscode os códigos ficaram uma bagunça porque ja mudei várias classes kkkkk

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Iury Gontijo Silva
| 247.7k xp | 320 posts

Cara, quando eu comecei, eu também estava com bastante dificuldade se tratando de flex e grid. Eu ficava bem perdido, não sabia direito como fazer, e só e hoje que lavai melhorando kkkk. Mas bom que você está praticando, então logo está se tornando mais familiar pra você.

E sim, é bem como você disse aí, como você monta o HTML influencia demais na forma como vai ficar a página na hora de aplicar as propriedades do flex. Pegando de exemplo, vamos colocar esse código aqui e o resultado dele (coloquei algo mais ou menos como eu entendi que você queria, com a opção do nome no canto esquerdo e as opções de about me e skills no centro):

<body>
    
    <div class="flex__container">
       
        <h1>NOME</h1>
        <div class="container">
            <h1>ABOUT ME</h1>
            <h1>SKILLS</h1>
        </div>
        <div class="container__vazio"></div>
    </div>

</body>

.flex__container{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.container{
    width: 20%;
    display: flex;
    justify-content: space-between;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeAqui, nós temos três elementos dentro do flex__container: o h1 'NOME', a div 'container', que tem os h1 'ABOUT ME' e 'SKILLS', e uma outra div vazia. Essa div vazia foi colocada com o único propósito de colocar posicionar a div 'container' no centro, quando colocamos a propriedade justify-content: space-between (inclusive, eu vou dar uma pesquisada depois pra descobrir se é uma boa prática ou não colocar div vazias com esse propósito).

Agora, se mudar o HTML pra essa forma, eu tenho o seguinte resultado:

<body>
    
    <div class="flex__container">
       
        <h1>NOME</h1>
        <h1>ABOUT ME</h1>
        <h1>SKILLS</h1>
        <div class="container__vazio"></div>
    </div>

</body>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Dessa forma, temos os quatro elementos do flex__container, os três h1 e a div vazia, dividindo o espaço. Daí dá pra ver que realmente tem que pensar em como montar o HTML com base em como você quer que fique o posicionamento, quais displays você pensa em usar, esse tipo de coisa.

Espero ter te ajudado um pouco a sanar sua dúvida, meu amigo, te desejo bons estudos, e vai na fé que você vai aprendendo com a prática. Abraços!

por Murilo Pertinhez
| 6.9k xp | 10 posts

Sanou demais minha duvida, obrigado mais uma vez Iury

por Iury Gontijo Silva
| 247.7k xp | 320 posts

Tamo junto, meu amigo, bons estudos!

por Murilo Pertinhez
| 6.9k xp | 10 posts

Iury, me permite fazer mais uma pergunta?

A questão das ''divs" que me ensinou me ajudou muito, estou conseguindo movimentar os elementos com mais liberdade, no entanto, estou com um pouco de dificuldade pra delimitar o tamanho total da pagina.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeDesculpa pela demonstração péssima kkk mas quando abro a pagina sobra muito espaço pra direita, essas bordas em line white eu fiz só pra ter uma base de como iria estilizar... Já procurei algum conteúdo relacionado mas nao encontro, o que eu tentei aplicar nao funcionou. Como eu poderia solucionar esse problema? Seria no "body" ?

por Iury Gontijo Silva
| 247.7k xp | 320 posts

Fala, Murilo! Tudo bom, né, meu amigo?

Então, cara, nesse caso, pelo que entendi, se você quiser que ocupe todo o espaço, pode colocar sim no body um width de 100%, que daí vai ocupar todo o espaço da página. Também é interesse que você coloque também o width do flex-container do cabeçalho como 100%, ou algo próximo disso, assim já vai ocupar melhor a área também.

Espero ter ajudado, meu amigo! Qualquer coisa, envia o seu código aqui pra gente dar uma olhada. Abraços!