Flex Layout: crie layouts utilizando o poder do Flexbox
:sparkles: Branch: flexlayout
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 utilizar "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, NUNCAflex-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:
Declare o flex-layout.row dentro dos blocks do template de store.home e declare os blocos propostos acima no seu arquivo home.jsonc
Altere as children do flex-layout.row, substituindo o bloco rich-text por uma coluna flex-layout.col.
Delete o bloco de rich-text proposto acima do seu tema.
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.
Flex Layout: crie layouts utilizando o poder do Flexbox
:sparkles: Branch: flexlayout
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 utilizar "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 usarflex-layout.row
eflex-layout.col
, NUNCAflex-layout
de forma isolada.Abaixo, temos um exemplo de flex layout composto de um
flex-layout.row
com dois children: uminfo-card
e umrich-text
:Atividade
flex-layout.row
dentro dosblocks
do template destore.home
e declare os blocos propostos acima no seu arquivohome.jsonc
flex-layout.row
, substituindo o blocorich-text
por uma colunaflex-layout.col
.rich-text
proposto acima do seu tema.flex-layout.col
no seu arquivohome.jsonc
com dois componentes de imagem como children:image#electronics
eimage#major-appliance
, nesta ordem.Defina os blocos
image
com as seguintes props:O resultado obtido deve ser semelhante a este:
:information_source: Lembre-se de acessar a documentação do Flex Layout caso tenha alguma dúvida durante a atividade.
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.