Flexbox para interfaces: padrões básicos. Menu responsivo sem Javascript Padrão: do contêiner de alinhamento de itens

Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-

Nome do ícone:

• carrinho de compras
• servidor
• pasta aberta
• jornal-o

Estilo CSS

Depois de termos feito a marcação, procedemos ao estilo. Abra style.css no corpo e defina o plano de fundo e a fonte Verdana.

Corpo(imagem de fundo: url("../img/escheresque_ste.png"); família de fontes: Verdana; )

Damos um fundo ao bloco com o menu e recuamos a parte superior em 100 pixels. e largura para preencher a tela inteira.

Menu Dws (cor de fundo: branco; margem superior: 100px; largura: 100%; )

Nos blocos Ul, alinhamos as listas horizontalmente usando desplay:flax , removemos o preenchimento e centralizamos nossos elementos usando justify-content:center .

Ul.dws-ul( display: flex; preenchimento: 0; justificar-conteúdo: centro; )

Removemos o marcador das listas LI e recuamos 10 picos em todos os lados.

Li.dws-li (estilo de lista: nenhum; preenchimento: 10px;)

Remova o sublinhado dos links e aumente o texto para 18 pixels. e torná-lo preto.

Li.dws-li a(decoração de texto: nenhum; tamanho da fonte: 18px; cor: #000; )

Mova o ícone um pouco para a direita usando margin-right:10px .

Li.dws-li a i(margem direita: 10px;)

Animação flutuante

Depois de termos feito o design básico, vamos passar para a animação flutuante.

Vamos criar pseudoelementos adicionais que destacarão o nome do elemento quando passar o mouse.

Vamos descrever o lado esquerdo, selecionar os links e atribuir a eles o pseudoelemento li.dws-li a::before , escrever conteúdo vazio:’’; , 20 fotos de largura. e uma altura de 3 picos. suficiente. Vamos definir a cor e para que o bloco apareça atribua a posição: em relação aos links; , e posicione-o absolutamente nos links, abaixe-o até o fundo e pressione-o na borda esquerda.

Li.dws-li a( ... posição: relativa; ) li.dws-li a::before( ... posição: absoluta; topo: 100%; esquerda: 0; )

Duplique este bloco e atribua a ele o pseudoelemento ::after. Mude o parâmetro left para right , escolha uma cor diferente #ff2117 .

Li.dws-li a::after( content: ""; largura: 20px; altura: 3px; cor de fundo: #ff2117; posição: absoluta; topo: 100%; direita: 0; )

Então fazemos a animação flutuante. Selecione os li e dê a eles um fundo um pouco mais escuro.

Li.dws-li:hover( cor de fundo: #e5eae8; )

Para fazer isso, selecione as listas ao passar o mouse e adicione a elas um pseudoelemento com largura de 50% e defina a transformação ao longo do eixo X da esquerda para a direita. Isso lhe dará movimento.

Li.dws-li:hover a:before( largura: 50%; transformar: traduzirX(100%); )

Repetiremos o mesmo para o pseudoelemento ::after, só que agora definiremos o movimento da direita para a esquerda.

Li.dws-li:hover a:after( largura: 50%; transformar: traduzirX(-100%); )

Li.dws-li a::before( ... transição: .5s; modo mix-blend: multiplicar; ) li.dws-li a::after( ... transição: .5s; modo mix-blend : multiplicar; )

Ficou muito bom, agora vamos definir a largura como zero e adicionar a cor vermelha ao passar o mouse sobre o link.

Li.dws-li a:hover( cor: #e62117; )

Li.dws-li a( ... preenchimento: 5px; ) li.dws-li a::before( ... topo: 90%; ) li.dws-li a::after( ... topo: 90 %; )

Basicamente, mostrei o que queria e acabou sendo um menu muito bom.

A aula foi preparada por Denis Gorelov.

Resumindo, o layout Flexbox nos oferece soluções simples para problemas antes difíceis. Por exemplo, quando você precisa alinhar um elemento verticalmente, ou pressionar o rodapé na parte inferior da tela, ou simplesmente inserir vários blocos em uma linha para que ocupem todo o espaço livre. Problemas semelhantes podem ser resolvidos sem flexibilidade. Mas, via de regra, essas soluções são mais como “muletas” - técnicas para usar CSS para fins diferentes dos pretendidos. Já com o flexbox tais tarefas são resolvidas exatamente como o modelo flex pretende.

Módulo CSS Flexible Box Layout (módulo CSS para layouts com blocos flexíveis), abreviadamente flexbox, foi criado para eliminar as deficiências na criação de uma ampla variedade de designs HTML, incluindo aqueles adaptados a diferentes larguras e alturas, e tornar o layout lógico e simples . E uma abordagem lógica, via de regra, funciona em lugares inesperados, onde o resultado não foi verificado - a lógica é tudo!

O Flexbox permite controlar com elegância uma variedade de parâmetros de elementos dentro de um contêiner: direção, ordem, largura, altura, alinhamento longitudinal e transversal, distribuição de espaço livre, alongamento e compactação de elementos.

Conhecimento básico

Um FlexBox consiste em um Container e seus Itens (elementos flexíveis).

Para habilitar o flexbox, qualquer elemento HTML precisa apenas atribuir a propriedade CSS display:flex; ou exibir:inline-flex; .

Após habilitar a propriedade flex, dois eixos são criados dentro do container: principal e transversal (perpendicular (⊥), eixo transversal). Todos os elementos aninhados (do primeiro nível) são alinhados ao longo do eixo principal. Por padrão, o eixo principal é horizontal e direcionado da esquerda para a direita (→), e o eixo transversal é correspondentemente vertical e direcionado de cima para baixo (↓).

Os eixos principal e transversal podem ser trocados, então os elementos serão localizados de cima para baixo (↓) e quando não couberem mais na altura, eles se moverão da esquerda para a direita (→) - ou seja, os eixos simplesmente trocaram de lugar . Neste caso, o início e o fim da disposição dos elementos não mudam - apenas mudam as direções (eixos)! É por isso que você precisa imaginar os eixos dentro do contêiner. Porém, não se deve pensar que existem alguns eixos “físicos” e que eles influenciam alguma coisa. O eixo aqui é apenas a direção do movimento dos elementos dentro do contêiner. Por exemplo, se especificamos o alinhamento dos elementos ao centro do eixo principal e depois alteramos a direção deste eixo principal, então o alinhamento mudará: os elementos estavam no meio horizontalmente, mas passaram a estar no meio verticalmente... Veja o exemplo.

Outra característica importante do Flexbox é a presença de linhas no sentido transversal. Para entender do que estamos falando, vamos imaginar que existe um eixo horizontal principal, são muitos elementos e eles não “cabem” no container, então passam para outra linha. Aqueles. um contêiner se parece com isto: um contêiner com duas linhas dentro dele, cada linha contendo vários elementos. Introduzido? Agora lembre-se que podemos alinhar verticalmente não apenas os elementos, mas também as linhas! Como isso funciona é visto claramente no exemplo da propriedade. E é assim que parece esquematicamente:

Propriedades CSS que podem afetar o modelo de layout: float, clear, vertical-align, colunas não funcionam no design flexível. Aqui, um modelo diferente para construir um layout é usado e essas propriedades CSS são simplesmente ignoradas.

Propriedades CSS do Flexbox

Flexbox contém diferentes regras CSS para controlar todo o design flexível. Alguns precisam ser aplicados ao contêiner principal e outros aos elementos deste contêiner.

Para contêiner

Habilita a propriedade flex para o elemento. Esta propriedade cobre o próprio elemento e seus elementos aninhados: apenas os descendentes de primeiro nível são afetados - eles se tornarão elementos do flex container.

• flexionar- o elemento estende-se por toda a sua largura e ocupa todo o seu espaço entre os blocos circundantes. As quebras de linha ocorrem no início e no final do bloco.
• inline-flex- um elemento envolve outros elementos. Neste caso, sua parte interna é formatada como um elemento de bloco e o próprio elemento é formatado como embutido.

flex e inline-flex diferem porque interagem de maneira diferente com os elementos circundantes, semelhante a display:block e display:inline-block .

Altera a direção do eixo principal do contêiner. O eixo transversal muda de acordo.

• linha (padrão)- direção dos elementos da esquerda para a direita (→)
• coluna- direção dos elementos de cima para baixo (↓)
• linha reversa- direção dos elementos da direita para a esquerda (←)
• coluna reversa- direção dos elementos de baixo para cima ()

Controla a transferência de elementos que não cabem no contêiner.

• agorarap (padrão)- os elementos aninhados são colocados em uma linha (com direção=linha) ou em uma coluna (com direção=coluna), independentemente de caberem ou não no contêiner.
• enrolar- inclui mover elementos para a próxima linha se eles não couberem no contêiner. Isso permite o movimento dos elementos ao longo do eixo transversal.
• wrap-reverso- o mesmo que wrap, só que a transferência não será para baixo, mas para cima (na direção oposta).

Combina as propriedades flex-direction e flex-wrap. Eles costumam ser usados ​​juntos, então a propriedade flex-flow foi criada para ajudar a escrever menos código.

flex-flow aceita os valores dessas duas propriedades, separados por um espaço. Ou você pode especificar um único valor para qualquer propriedade.

/* somente direção flexível */ flex-flow: row; flex-flow: linha reversa; fluxo flexível: coluna; flex-flow: coluna reversa; /* somente flex-wrap */ flex-flow: nowrap; fluxo flexível: envoltório; flex-flow: wrap-reverso; /* ambos os valores ao mesmo tempo: flex-direction e flex-wrap */ flex-flow: row nowrap; flex-flow: quebra de coluna; flex-flow: coluna reversa wrap-reverse; justificar-conteúdo:

Alinha os elementos ao longo do eixo principal: se direção=linha, então horizontalmente, e se direção=coluna, então verticalmente.

• início flexível (padrão)- os elementos irão desde o início (pode sobrar algum espaço no final).
• extremidade flexível- os elementos são alinhados no final (o espaço permanecerá no início)
• Centro- no centro (o espaço permanecerá à esquerda e à direita)
• espaço entre- os elementos mais externos são pressionados contra as bordas (o espaço entre os elementos é distribuído uniformemente)
• espaço ao redor- o espaço livre é distribuído uniformemente entre os elementos (os elementos mais externos não são pressionados contra as bordas). O espaço entre a borda do contêiner e os elementos externos será a metade do espaço entre os elementos no meio da linha.
• espaço uniformemente

Alinha as linhas que contêm elementos ao longo do eixo transversal. O mesmo que justificar conteúdo apenas para o eixo oposto.

Nota: Funciona quando há pelo menos 2 linhas, ou seja, Se houver apenas 1 linha, nada acontecerá.

Aqueles. se flex-direction: row , então esta propriedade alinhará as linhas invisíveis verticalmente. É importante notar aqui que a altura do bloco deve ser definida de forma rígida e deve ser maior que a altura das linhas, caso contrário as próprias linhas esticarão o contêiner e qualquer alinhamento delas perderá o sentido, pois não há espaço livre entre eles... Mas quando flex-direction: column , então as linhas se movem horizontalmente → e a largura do contêiner é quase sempre maior que a largura das linhas e alinhar as linhas imediatamente faz sentido...

• esticar (padrão)- as linhas se estendem para preencher completamente a linha
• início flexível- as linhas são agrupadas na parte superior do contêiner (pode haver algum espaço no final).
• extremidade flexível- as linhas são agrupadas na parte inferior do contêiner (o espaço permanecerá no início)
• Centro- as linhas são agrupadas no centro do contêiner (o espaço permanecerá nas bordas)
• espaço entre- as fileiras externas são pressionadas contra as bordas (o espaço entre as fileiras é distribuído uniformemente)
• espaço ao redor- o espaço livre é distribuído uniformemente entre as linhas (os elementos extremos não são pressionados contra as bordas). O espaço entre a borda do contêiner e os elementos externos será a metade do espaço entre os elementos no meio da linha.
• espaço uniformemente- o mesmo que space-around , apenas a distância entre os elementos externos e as bordas do contêiner é a mesma que entre os elementos.

Alinha elementos ao longo de um eixo transversal dentro de uma linha (linha invisível). Aqueles. As próprias linhas são alinhadas por meio de align-content e os elementos dentro dessas linhas (linhas) são alinhados por meio de align-items e ao longo de todo o eixo transversal. Não existe tal divisão ao longo do eixo principal, não existe o conceito de linhas e os elementos são alinhados por justify-content .

• esticar (padrão)- os elementos são esticados para preencher completamente a linha
• início flexível- os elementos são pressionados no início da linha
• extremidade flexível- os elementos são pressionados no final da linha
• Centro- os elementos são alinhados ao centro da linha
• linha de base- os elementos são alinhados à linha de base do texto

Para elementos de contêiner

Define o fator de ampliação do elemento quando há espaço livre no contêiner. Flex-grow padrão: 0, ou seja, nenhum dos elementos deve crescer e preencher o espaço livre do contêiner.

Crescimento flexível padrão: 0

• Se você especificar flex-grow:1 para todos os elementos, todos eles serão estendidos igualmente e preencherão todo o espaço livre no contêiner.
• Se você especificar flex-grow:1 para um dos elementos, ele preencherá todo o espaço livre no contêiner e os alinhamentos via justify-content não funcionarão mais: não há espaço livre para alinhar...
• Com crescimento flexível:1 . Se um deles tiver flex-grow:2 então será 2 vezes maior que todos os outros
• Se todas as caixas flexíveis dentro de um contêiner flexível tiverem flex-grow:3 então elas terão o mesmo tamanho
• Com crescimento flexível:3. Se um deles tiver flex-grow:12 então será 4 vezes maior que todos os outros

Como funciona? Digamos que um contêiner tenha 500px de largura e contenha dois elementos, cada um com largura base de 100px. Isso significa que restam 300 pixels livres no contêiner. Agora, se especificarmos flex-grow:2; , e o segundo flex-grow: 1; , então os blocos ocuparão toda a largura disponível do container e a largura do primeiro bloco será de 300px e do segundo de 200px. Isso se explica pelo fato de que os 300px de espaço livre disponíveis no container foram distribuídos entre os elementos na proporção de 2:1, +200px para o primeiro e +100px para o segundo.

Observação: você pode especificar números fracionários no valor, por exemplo: 0,5 - flex-grow:0,5

Define o fator de redução do elemento. A propriedade é o oposto de flex-grow e determina como o elemento deve encolher se não houver espaço livre no contêiner. Aqueles. a propriedade começa a funcionar quando a soma dos tamanhos de todos os elementos é maior que o tamanho do container.

Flex-shrink padrão: 1

Digamos que o contêiner tenha 600px de largura e contenha dois elementos, cada um com 300px de largura - flex-basis:300px; . Aqueles. dois elementos preenchem completamente o recipiente. Dê ao primeiro elemento flex-shrink: 2; , e o segundo flex-shrink: 1; . Agora vamos reduzir a largura do contêiner em 300px, ou seja, os elementos devem ser reduzidos em 300px para caber dentro do contêiner. Eles encolherão em uma proporção de 2:1, ou seja, o primeiro bloco diminuirá em 200px e o segundo em 100px e os novos tamanhos dos elementos se tornarão 100px e 200px.

Observação: você pode especificar números fracionários no valor, por exemplo: 0,5 - flex-shrink:0,5

Define a largura base do elemento - a largura antes que outras condições que afetem a largura do elemento sejam calculadas. O valor pode ser especificado em px, em, rem,%, vw, vh, etc. A largura final dependerá da largura base e dos valores de flex-grow, flex-shrink e do conteúdo dentro do bloco. Com auto, o elemento obtém uma largura base relativa ao conteúdo dentro dele.

Padrão: automático

Às vezes é melhor definir a largura de um elemento através da propriedade de largura usual. Por exemplo, largura: 50%; significará que o elemento dentro do contêiner terá exatamente 50%, mas as propriedades flex-grow e flex-shrink ainda funcionarão. Isso pode ser necessário quando o elemento é esticado pelo conteúdo dentro dele, mais do que o especificado em flex-basis. Exemplo.

flex-basis será “rígido” se esticar e encolher forem definidos como zero: flex-basis:200px; flex-crescer:0; flex-encolher:0; . Tudo isso pode ser escrito assim: flex:0 0 200px; .

Um breve resumo das três propriedades: flex-grow flex-shrink flex-basis .

Padrão: flexível: 0 1 automático

No entanto, você pode especificar um ou dois valores:

Flexível: nenhum; /* 0 0 automático */ /* número */ flex: 2; /* flex-grow (flex-basis vai para 0) */ /* não é um número */ flex: 10em; /* base flexível: 10em */ flex: 30px; /* base flexível: 30px */ flex: auto; /* flex-base: auto */ flex: content; /* base flexível: conteúdo */ flex: 1 30px; /* flex-grow e flex-basis */ flex: 2 2; /* flex-grow e flex-shrink (flex-basis vai para 0) */ flex: 2 2 10%; /* flex-grow e flex-shrink e flex-basis */align-self:

Permite alterar a propriedade align-items, apenas para um único elemento.

Padrão: do contêiner de alinhamento de itens

• esticar- o elemento é esticado para preencher completamente a linha
• início flexível- o elemento é pressionado no início da linha
• extremidade flexível- o elemento é pressionado no final da linha
• Centro- o elemento está alinhado ao centro da linha

linha de base- o elemento está alinhado à linha de base do texto

Permite alterar a ordem (posição, posição) de um elemento na linha geral.

Padrão: ordem: 0

Por padrão, os elementos têm ordem: 0 e são colocados na ordem em que aparecem no código HTML e na direção da linha. Mas se você alterar o valor da propriedade order, os elementos serão organizados na ordem dos valores: -1 0 1 2 3 ... . Por exemplo, se você especificar order: 1 para um dos elementos, todos os zeros irão primeiro e depois o elemento com 1.

Desta forma, por exemplo, você pode mover o primeiro elemento até o final sem alterar a direção do movimento dos demais elementos ou do código HTML.

Notas

Qual é a diferença entre base flexível e largura?

Abaixo estão as diferenças importantes entre base flexível e largura/altura:

flex-basis funciona apenas para o eixo principal. Isso significa que com flex-direction:row flex-basis controla a largura e com flex-direction:column controla a altura. .

flex-basis se aplica apenas a elementos flexíveis. Isso significa que se você desabilitar o flex para um contêiner, esta propriedade não terá efeito.

Elementos de contêiner absolutos não participam da construção flexível... Isso significa que flex-basis não afeta os elementos flexíveis de um contêiner se eles forem absolutos position:absolute . Eles precisarão especificar largura/altura.

• Ao usar a propriedade flex, 3 valores (flex-grow/flex-shrink/flex-basis) podem ser combinados e escritos brevemente, mas para aumentar ou diminuir a largura você precisa escrever separadamente. Por exemplo: flex:0 0 50% == largura:50%; flex-encolher:0; . Às vezes é apenas inconveniente.

Se possível, ainda prefira base flexível. Use largura somente quando flex-basis não for apropriado.

A diferença entre base flexível e largura - um bug ou um recurso?

O conteúdo dentro de um elemento flexível o empurra e não pode ir além dele. No entanto, se você definir a largura usando width ou max-width em vez de flex-basis , um elemento dentro de um flex container poderá se estender além dos limites desse contêiner (às vezes esse é exatamente o comportamento que você deseja). Exemplo:

Exemplos de layout flexível

Em nenhum lugar dos exemplos são usados ​​prefixos para compatibilidade entre navegadores. Fiz isso para facilitar a leitura do css. Portanto, veja exemplos nas versões mais recentes do Chrome ou Firefox.

#1 Exemplo simples com alinhamento vertical e horizontal

Vamos começar com o exemplo mais simples - alinhamento vertical e horizontal ao mesmo tempo e em qualquer altura de bloco, até mesmo de borracha.

Ou assim, sem bloco dentro:

#1.2 Separação (quebra) entre elementos do bloco flexível

Para posicionar os elementos do contêiner ao longo das bordas e selecionar aleatoriamente um elemento após o qual haverá uma quebra, você precisa usar a propriedade margin-left:auto ou margin-right:auto.

#2 Menu adaptativo no flex

Vamos criar um menu no topo da página. Em uma tela ampla, deve estar à direita. Em média, alinhe no meio. E no pequeno, cada elemento deve estar em uma nova linha.

#3 3 colunas adaptáveis

Este exemplo mostra como fazer 3 colunas de forma rápida e conveniente, que, quando estreitadas, se transformarão em 2 e depois em 1.

Observe que isso pode ser feito sem usar regras de mídia, tudo é flexível.

Vá para jsfiddle.net e altere a largura da seção “resultado”

#4 Blocos adaptativos em flex

Digamos que precisamos gerar 3 blocos, um grande e dois pequenos. Ao mesmo tempo, é necessário que os blocos se adaptem às pequenas telas. Nós fazemos:

Vá para jsfiddle.net e altere a largura da seção “resultado”

#5 Galeria com flexibilidade e transição

Este exemplo mostra quão rápido você pode fazer um acordeão fofo com fotos usando flex. Preste atenção à propriedade de transição do flex.

#6 Flex to Flex (apenas um exemplo)

A tarefa é fazer um bloco flexível. Para que o início do texto em cada bloco fique na mesma linha horizontalmente. Aqueles. À medida que a largura diminui, os blocos aumentam em altura. É necessário que a imagem fique na parte superior, o botão fique sempre na parte inferior e o texto do meio comece em uma linha horizontal...

Para resolver este problema, os próprios blocos são esticados com flexão e ajustados na largura máxima possível. Cada bloco interno também é uma estrutura flexível, com um eixo girado flex-direction:column; e o elemento do meio (onde está o texto) é esticado flex-grow:1; para preencher todo o espaço livre, é assim que se consegue o resultado - o texto começava com uma linha...

Mais exemplos

Suporte ao navegador - 98,3%

Claro, não há suporte completo, mas todos os navegadores modernos suportam designs flexbox. Alguns ainda exigem prefixos. Para ter uma ideia real, vamos dar uma olhada em caniuse.com e ver que 96,3% dos navegadores usados ​​hoje funcionarão sem prefixos, com 98,3% usando prefixos. Este é um excelente indicador para usar o flexbox com confiança.

Para saber quais prefixos são relevantes hoje (junho de 2019), darei um exemplo de todas as regras flexíveis com com os prefixos necessários:

/* Contêiner */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:coluna; flex-direction:coluna; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow: quebra de coluna; flex-flow: quebra de coluna; -webkit-box-pack:justificar; -ms-flex-pack:justificar; justificar-content:espaço entre; -ms-flex-line-pack: distribuir; alinhar-content:espaço-ao redor; ) /* Elementos */ .flex-item ( -webkit-box-flex:1; -ms-flex-positivo:1; flex-grow:1; -ms-flex- negativo:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :centro; alinhar-self:centro; -webkit-box-ordinal-group:3; -ms-flex-order:2; ordem:2; )

É melhor que as propriedades com prefixos venham antes da propriedade original.
Esta lista não contém nenhum prefixo desnecessário hoje (de acordo com caniuse), mas em geral existem mais prefixos.

• (novo) - nova sintaxe: display: flex; .
• (tweener) - antiga sintaxe não oficial de 2011: display: flexbox; .
• (antigo) - sintaxe antiga de 2009: display: box;

Vídeo

Bem, não se esqueça do vídeo, às vezes também é interessante e compreensível. Aqui estão alguns dos mais populares:

Links úteis no Flex

flexboxfroggy.com - jogo educacional flexbox.

Flexplorer é um construtor visual de código flexível.

Olá a todos! No início de 2018, segundo o site Eu posso usar, layout no flexbox, é 97,8% compatível com navegadores. Esses são excelentes indicadores para esta tecnologia nada nova para layout de sites. Agora não há razão para não usar este método de layout conveniente. O que nós vamos fazer agora?

Tendo criado vários layouts em Caixa flexível CSS, não quero mais voltar aos desatualizados flutuador e até mesmo para uma estrutura tão favorita entre os designers de layout como Inicialização. Embora, InicializaçãoÉ muito cedo para descartar isso, porque usando sua famosa grade, você não precisa se preocupar com consultas de mídia.

Nesta lição, criaremos um cabeçalho de site com um típico menu adaptativo usando CSS flexível método.

O cabeçalho consiste em três blocos lógicos:

1. Bloco de logotipo
2. Bloco com menu feito em listas
3. Bloquear com ícone e número de telefone

Esses três blocos serão colocados em um invólucro de bloco externo comum cabeçalho, o que fará por si só exibição: flexível; por três quarteirões.

Dentro do bloco navegação, vamos anotar novamente exibição: flexível; para itens de menu. Desta forma conseguiremos flexibilidade; quando o tamanho da tela for reduzido, os itens do menu poderão ser alinhados um abaixo do outro.

Para uma demonstração clara, faremos tudo HTML marcação para o cabeçalho do site.

+380973457685

É assim que o chapéu ficará sem usar estilos, é assim que deveria ser.

Agora atenção! Basta especificar dois blocos exibição: flexível; e todo o conteúdo do cabeçalho será desenhado em uma linha.

Cabeçalho(
exibição: flexível;
}

Cabeçalho .menu ul (
exibição: flexível;
}

É assim que funciona caixa flexível.

Corpo (
cor de fundo: #fff;
família de fontes: "Open Sans", sem serifa;
altura da linha: 1,5;
}

Cabeçalho(
borda: 2px sólido #ccc;
exibição: flexível;
flex-wrap: envoltório; /*quebra de linha */
justificar-conteúdo: espaço entre; /*pressiona o conteúdo até as bordas */
alinhar itens: centro; /*alinha os elementos centralizados verticalmente */
}

Cabeçalho.logotipo (
preenchimento à esquerda: 30px;
}

Cabeçalho .menu ul (
exibição: flexível;
estilo de lista: nenhum;
}

Cabeçalho .menu ul li (
margem: 20px 10px;
}

Cabeçalho .menu ul a (
transformação de texto: maiúscula;
decoração de texto: nenhuma;
intensidade da fonte: Negrito;
cor: #06a327;
}

Telefone (
tamanho da fonte: 110%;
cor: #333;
preenchimento à direita: 40px;
}

Estamos trabalhando na adaptabilidade do cabeçalho

A essência do processo de adaptabilidade do site é encontrar pontos de controle nos quais os elementos do site não serão visíveis ou parecerão desleixados. Nossa tarefa, ao compactar a largura do navegador, é ver o problema e corrigi-lo adicionando o código apropriado (consulta de mídia) ao arquivo de estilo.

Por exemplo, em uma tela de 900 pixels de largura, o bloco com o telefone é pressionado contra a borda esquerda do cabeçalho.

Nesta edição faremos menu horizontal com efeito pairando. Vamos conectar ícones de fontes, ativar o modo de mesclagem de camadas usando mix-blend-mode: multiplicar, usar as pseudoclasses :hover e nos familiarizar com desplay:flax, tudo feito em CSS3 puro.

Wireframe de menu em HTML

Baixe o arquivo para o seu computador e descompacte-o. Ele contém três pastas, css onde estão localizados os arquivos de estilo, pasta de fontes com ícones, img nela há uma imagem para o fundo.

Mova tudo para o ambiente de desenvolvimento onde você trabalha. Vou escrever todo o código no phpstorm. Copio todas as pastas e arquivos nele, abro index.html e vamos começar a descrever o quadro do menu.

Nós escrevemos a tag body