Open github-learning-lab[bot] opened 5 years ago
:white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Rich-text should not be rendered by flex-layout.row
:white_check_mark: Add a flex-layout.col
inside of flex-layout.row
:white_check_mark: Define two images as children of flex-layout.col with the correct props for each image
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.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.
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.