Jump to content

Flex Box no header


emanuelvfc
 Compartilhar

Postagens Recomendadas

div class="estrutura">
    <header class="header">
        <a href="#" class="logo">
            <img src="wildbeast.svg" alt="Logo">
        </a>
 
        <nav class="navegacao">
            <ul>
                <li><a href="#">sobre</a></li>
                <li><a href="#">animais</a></li>
                <li><a href="#">contato</a></li>
            </ul>
        </nav>
    </header>

Na class "estrutura" eu defini o grid e as colunas. Depois, na class "header" eu fui definir como flex para organiza-lo com esse display, porém a imagem "logo" desaparece e as propriedades flex não funcionam, nenhuma delas. Ex:

.estrutura{
   display: grid;
   grid-template-columns: minmax(160px, 1fr) 3fr 300px;
   grid-template-areas: 
       'header header header'
       'sidenav content anuncios'
       'rodape rodape rodape'
   ;
 }

.header{
   display: flex;
   grid-area: header;
   background-image: linear-gradient(to right, #8844ee, #B07DFB);
   padding: 30px;
}

 

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar



Sobre o Fórum

Este é um fórum para todos que fazem parte
do ecossistema de uma Software House!

Bem-vindo(a) ao fórum da Casa do Desenvolvedor, uma comunidade completa, onde desenvolvedores, software houses, profissionais de marketing, experiência e vendas, fornecedores de soluções, aficionados por inovação e tecnologia podem tirar dúvidas, compartilhar novidades e conhecimento, trocar experiências e até postar uns memes que só nós da tecnologia entendemos 😅

Crie agora sua conta e vamos juntos fortalecer
o desenvolvimento de software no Brasil! 🇧🇷

×
×
  • Create New...