Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::x::x::x:
:white_check_mark: Getting file
:x: Your flex-layout.row
still has a rich-text
among its children.
:x: Could not find flex-layout.col
inside of flex-layout.row
:x: Could not find both image blocks declared as children of flex-layout.col
:white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting file
: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: create layouts using the power of Flexbox
:sparkles: Branch: flexlayout
Introduction
The Flex Layout is a layout structuring paradigm created in Store Framework to allow the construction of complex layouts. This paradigm uses the concepts of lines and columns to define the desired block structure and positioning on a certain page.
There are two basic building blocks for each Flex Layout:
flex-layout.row
flex-layout.col
If you are already familiar with the Flexbox used in CSS, the Flex Layout should be easy to understand, since Flexbox is already used "under the hood" by flex-layout.row and flex-layout.col.
Flex Layout
With the help of Flex Layout, you can create customized layouts, using the Flexbox structure of lines and columns.
Analyzing the block's documentation, we see that you can use any block array as Flex Layout's
children
. In addition, you should always useflex-layout.row
andflex-layout.col
, and NEVERflex-layout
alone.Below, we have an example of a flex layout comprised of a
flex-layout.row
with two children: aninfo-card
and arich-text
:Activity
flex-layout.row
in thestore.home
's templateblocks
and then declare the blocks mentioned above in yourhome.jsonc
file.flex-layout.row
children, substituting therich-text
block with aflex-layout.col
column.rich-text
block from your theme.flex-layout.col
block in yourhome.jsonc
file with two image components as children:image#electronics
andimage#major-appliance
, in this order.Define the
image
blocks with the following props:The result should be similar to this:
:information_source: Remember to access the Flex Layout documentation in case you have any questions during the activity.
If you're still unsure as to how to send your answers, click here.