Aula 5

No mundo dinâmico do desenvolvimento web, a flexibilidade é fundamental. É aí que entra em cena o display: flex, um módulo de CSS que permite criar estruturas responsivas e adaptáveis com total facilidade.

1. Fundamentos do Display: Flex

• Flex Container: O elemento pai que acolhe seus filhos flexíveis, tornando-se o responsável da orquestra.
• Flex Items: Os elementos que residem dentro do container, tornados flexíveis pelo pai.
• Eixo Principal: A linha imaginária que define a direção na qual os flex items se alinham, seja horizontal (row) ou vertical (column).
• Espaço Livre: As áreas vazias entre os flex items, aguardando suas instruções para serem preenchidas ou distribuídas.

2. Propriedades Mágicas

Algumas propriedades essenciais para manipular o layout com display: flex:

• flex-direction: Define a direção do eixo principal, guiando o conjunto dos seus flex items (childrens) (row, column, row-reverse, column-reverse).
• flex-wrap: Determina como os flex items se comportam quando o espaço se torna escasso, envolvendo-os em várias linhas (wrap) ou encolhendo (nowrap).
• flex-grow: Distribui o espaço livre entre os flex items, concedendo mais espaço a alguns enquanto outros ficam iguais.
• flex-shrink: Ajusta o tamanho dos flex items quando o espaço se torna limitado, diminuindo-os proporcionalmente (positive values) ou protegendo-os de encolher (negative values).
• flex-basis: Define a largura ou altura base de cada flex item, servindo como ponto de partida para o crescimento ou encolhimento (auto, <length>, <percentage>).

• url():

  Importa imagens, fontes e outros recursos externos diretamente no CSS, facilitando o gerenciamento de ficheiros.

  body {
  	background-image: url('imagem.jpg');
  } 

• calc():

  Realiza cálculos matemáticos dentro do CSS, ajustando valores dinamicamente.

  div { width: calc(50% - 20px); /* Divide a largura da tela pela metade e subtrai 20px */ }

• rgb() e rgba():

  Cria cores personalizadas com precisão, definindo valores individuais de vermelho, verde e azul (com ou sem opacidade).

          h1 {
            color: rgb(255, 0, 0); /* Vermelho puro */
          }
  
          a {
            color: rgba(0, 0, 255, 0.5); /* Azul semitransparente */
          }
        

• linear-gradient():

  Cria gradientes de cores suaves e dinâmicos, com transições entre cores definidas.

          body {
            background: linear-gradient(to right, #f00, #00f); /* Gradiente do vermelho para o azul */
          }
        

• boxShadow():

  Adiciona sombras aos elementos, simulando efeitos 3D e destacando o conteúdo.

          button {
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Sombra cinza com opacidade */
          }
        

• clamp():

  A função clamp() funciona como uma pinça, definindo um valor mínimo, ideal e máximo para uma propriedade CSS. O valor final ficará entre o mínimo e o máximo, respeitando o valor ideal sempre que possível.

           h1 {
        font-size: clamp(1rem, 2vw, 3rem); /* Tamanho mínimo 1rem, ideal relativo à viewport (2vw), máximo 3rem */
      }