Flex layout

Flex Layout: crie layouts utilizando o poder do Flexbox

Introdução

O Flex Layout é um paradigma de estruturação de layout criado no Store Framework para permitir a construção de layouts complexos. Esse paradigma usa o conceito de linhas e colunas para definir a estrutura e o posicionamento desejados dos blocos em uma determinada página.

Existem dois blocos de construção básicos de cada Flex Layout:

  • flex-layout.row
  • flex-layout.col

Se você já está familiarizado com o Flexbox utilizado no CSS, o Flex Layout deve ser simples de entender, já que o Flexbox está sendo utilizado "por debaixo dos panos" pelo flex-layout.row e flex-layout.col.

Flex Layout

Com o Flex Layout é possível criar layouts personalizados, utilizando a estrutura de linhas e colunas do Flexbox.

Analisando a documentação do bloco, vemos que você pode utilizar qualquer array de blocos como children do Flex Layout. Além disso, você deve sempre usar flex-layout.row e flex-layout.col, NUNCA flex-layout de forma isolada.

Abaixo, temos um exemplo de flex layout composto de um flex-layout.row com dois children: um info-card e um rich-text:

  "flex-layout.row":{
    "children": [
      "info-card#rethink",
      "rich-text#deletar"
    ]
  },

 "info-card#rethink": {
    "props": {
      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/utensilios-cozinha-min.png",
      "isFullModeStyle": true,
      "headline": "Time to rethink your kitchen",
      "callToActionText": "Discover",
      "textPosition": "center"
    }
  },

  "rich-text#deletar": {
    "props": {
      "text": "I'll be deleted soon"
    }
  }

Atividade

  1. Declare o flex-layout.row dentro dos blocks do template de store.home e declare os blocos propostos acima no seu arquivo home.jsonc

  2. Altere as children do flex-layout.row, substituindo o bloco rich-text por uma coluna flex-layout.col.

  3. Delete do seu tema o bloco de rich-text proposto acima.

  4. Declare o bloco flex-layout.col no seu arquivo home.jsonc com dois componentes de imagem como children: image#electronics e image#major-appliance, nesta ordem.

  5. Defina os blocos image com as seguintes props:

    ...
    "image#electronics": {
      "props": {
        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
        "maxWidth": "100%"
      }
    },
    "image#major-appliance": {
      "props": {
        "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
        "maxWidth": "100%"
      }
    }
    

O resultado obtido deve ser semelhante a este:

imageimage

Note: Lembre-se de acessar a documentação do Flex Layout caso tenha alguma dúvida durante a atividade.

Está com dúvidas?

Veja o gabarito para esta etapa ou participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue