Flex Box no header

Flexbox

HTML5

CSS3

Front-end

02/06/2022

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{
   grid-area: header;
   background-image: linear-gradient(to right, #8844ee, #B07DFB);
   padding: 30px;
}
Emanuel Cantalejo

Emanuel Cantalejo

Curtidas 0

Respostas

Edson Marcolongo

Edson Marcolongo

02/06/2022

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{
   grid-area: header;
   background-image: linear-gradient(to right, #8844ee, #B07DFB);
   padding: 30px;
}


Seja mais específico no erro, pois eu testei aqui e a logo aparece normal, além de eu conseguir utilizar normalmente as propriedades de flexbox no header:

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

ul li{
display: inline;
margin: 0px 20px;
}

ul li a {
color: black;
text-decoration: none;
font-size: 20px;
}
GOSTEI 0
POSTAR