Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Frontend SELF PT /Direção dos eixos

Direção dos eixos

Frontend SELF PT
Nível 17 , Lição 2
Disponível

6.1 Propriedade flex-direction

Flexbox oferece ferramentas flexíveis e poderosas para criar layouts responsivos. Uma parte importante desse sistema são os eixos de layout, que determinam como os elementos Flex serão dispostos dentro do Flex-container. Abaixo, vamos analisar detalhadamente as propriedades flex-direction e flex-wrap, que controlam a direção dos eixos e o comportamento dos elementos Flex quando eles são excedidos.

A propriedade flex-direction define a direção do eixo principal ao longo do qual os elementos Flex serão dispostos. Essa direção pode ser horizontal ou vertical, assim como direta ou invertida.

Valores:

  • row: o eixo principal é horizontal da esquerda para a direita (valor padrão)
  • row-reverse: o eixo principal é horizontal da direita para a esquerda
  • column: o eixo principal é vertical de cima para baixo
  • column-reverse: o eixo principal é vertical de baixo para cima

Exemplo de uso

1. Elementos dispostos horizontalmente:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
Kotlin

2. Elementos dispostos verticalmente:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>

      <div class="container-column-reverse">
        <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-row: elementos dispostos horizontalmente da esquerda para a direita
  • .container-row-reverse: elementos dispostos horizontalmente da direita para a esquerda
  • .container-column: elementos dispostos verticalmente de cima para baixo
  • .container-column-reverse: elementos dispostos verticalmente de baixo para cima

6.2 Propriedade flex-wrap

A propriedade flex-wrap define se os elementos Flex serão movidos para uma nova linha/coluna se não couberem em uma única linha. Isso é especialmente útil para criar layouts responsivos, onde o tamanho do container pode mudar dependendo do dispositivo ou tela.

Valores

  • nowrap: os elementos não são movidos e são dispostos em uma única linha/coluna (valor padrão)
  • wrap: os elementos são movidos para uma nova linha/coluna quando necessário
  • wrap-reverse: os elementos são movidos para uma nova linha/coluna na ordem inversa

Exemplos de uso

Valor nowrap:

Os elementos não são movidos e são dispostos em uma única linha/coluna (valor padrão).

CSS 
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Valor wrap:

Os elementos são movidos para uma nova linha/coluna quando necessário.

CSS 
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Valor wrap-reverse:

Os elementos são movidos para uma nova linha/coluna na ordem inversa.

CSS 
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Explicação do código:

  • .container-nowrap: os elementos Flex são dispostos numa única linha, mesmo que eles ultrapassem os limites do container
  • .container-wrap: os elementos Flex são movidos para uma nova linha se não couberem numa única linha
  • .container-wrap-reverse: os elementos Flex são movidos para uma nova linha na ordem inversa

6.3 Uso de flex-direction e flex-wrap

As propriedades flex-direction e flex-wrap podem ser combinadas usando o shorthand flex-flow. Esta propriedade permite definir a direção do eixo e o envolvimento dos elementos simultaneamente.

Sintaxe:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Exemplo de uso:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
        <div class="item">Elemento 5</div>
      </div>

Explicação do código:

  • .container: Flex-container usando combinado de flex-direction: row; e flex-wrap: wrap;, o que significa que os elementos são dispostos horizontalmente e movidos para uma nova linha quando necessário
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION