Fundamentos do Flexbox

5.1 Conceitos básicos do Flexbox

Flexbox (Flexible Box Layout) — é um sistema de layout CSS poderoso, que oferece maneiras flexíveis e eficientes de distribuir espaço e alinhar elementos dentro de um contêiner. O Flexbox é particularmente útil para criar layouts complexos e design responsivo. Agora vamos ver os fundamentos do Flexbox, incluindo a criação de contêineres Flex e elementos, além do uso da propriedade display: flex;.

Conceitos básicos do Flexbox

O Flexbox consiste em dois componentes principais:

• Contêiner Flex: elemento pai que contém os elementos Flex.
• Elementos Flex: elementos filhos dentro do Contêiner Flex, que são alinhados e distribuídos de acordo com as regras do Flexbox.

Contêiner Flex

Um contêiner Flex é criado com a propriedade display: flex; ou display: inline-flex;. O contêiner Flex gerencia a disposição de seus elementos filhos (elementos Flex) e oferece várias possibilidades para alinhá-los e distribuí-los.

    
      .container {
        display: flex; /* ou inline-flex */
      }
    
  

Exemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

Explicação do código:

• .container: Contêiner Flex, criado com display: flex;. Dentro deste contêiner, os elementos são alinhados e distribuídos de acordo com as regras do Flexbox
• .item: Elementos Flex, que são elementos filhos do Contêiner Flex

5.2 Propriedades do Contêiner Flex

A propriedade display: flex; define o elemento como um Contêiner Flex. Os elementos filhos deste contêiner automaticamente se tornam Elementos Flex e começam a seguir as regras do Flexbox.

display: flex;

Cria um Contêiner Flex em bloco. O Contêiner Flex se comporta como um elemento de bloco, ocupando toda a largura disponível do elemento pai.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Cria um Contêiner Flex em linha. O Contêiner Flex se comporta como um elemento em linha, ocupando apenas a largura necessária, e pode ser posicionado ao lado de outros elementos em linha.

    
      .inline-container {
        display: inline-flex;
      }
    
  

Exemplo de uso:

    
      .inline-container {
        display: inline-flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <div class="inline-container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>

      <div class="inline-container">
        <div class="item">Elemento 4</div>
        <div class="item">Elemento 5</div>
      </div>
    
  

Explicação do código:

• inline-container — é um Contêiner Flex, criado com display: inline-flex;. Dentro deste contêiner, os elementos são alinhados e distribuídos de acordo com as regras do Flexbox. Contêineres se comportam como elementos em linha e são posicionados lado a lado.

5.3 Propriedades dos Elementos Flex

1. A propriedade flex — é uma abreviação para definir flex-grow, flex-shrink e flex-basis. Ela permite que você controle como os elementos Flex crescem e encolhem para preencher o espaço disponível.

Sintaxe:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Exemplo de uso:

    
      .item {
        flex: 1;
      }
    
  

2. Propriedade order

A propriedade order define a ordem em que os elementos Flex são dispostos dentro do Contêiner Flex. Por padrão, todos os elementos têm o valor order: 0;.

Valores

Números inteiros. Elementos com um valor menor serão posicionados antes dos elementos com um valor maior.

Sintaxe:

    
      .element {
        order: value;
      }
    
  

Exemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item-1 {
        order: 2;
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

    
      <div class="container">
        <div class="item-1">Elemento 1</div>
        <div class="item-2">Elemento 2</div>
        <div class="item-3">Elemento 3</div>
      </div>
    
  

Explicação do código:

• .item-1: tem o valor order: 2, então será posicionado após o elemento com order: 1
• .item-2: tem o valor order: 1, então será posicionado primeiro
• .item-3: tem o valor order: 3, então será posicionado por último