let's talk about app layouts since the
app builder is focused on web apps
we are offering flex as one of the
approaches to create layouts
the outermost container you see here is
the canvas or viewport
and you can change the size by editing
the viewport size in the properties
panel
from now on i will be referring to
viewport as the canvas
just to make it easier flex layout is
available to you as a row or column
layout component in the toolbox
these layout containers have built-in
settings that allow us to modify the
position of the nested ui elements
it's shown here as a horizontal align
and a vertical align property
so in this example i have two column
layouts added
inside the canvas as nested elements
now i can change how the nested elements
are arranged
by changing the direction of the canvas
properties from row
to column and then back to row
so one thing to note is that the canvas
size is only applied to provide a
predictable design time experience
when you generate the app or when
previewing the canvas of viewport size
is ignored
to fill up all available space both
vertically and horizontally
let's look at a more meaningful example
here
we want the sign-in dialog to be
centered on the canvas now to make this
happen
i will use the alignment settings on the
canvas to center the nested container
vertically
and horizontally on the canvas
for the dialog container itself i have
used a column layout
so that everything stacks vertically
inside it right now
the layout container is sized based on
content
but i can always specify and height and
width for it
i can also add padding property to the
container and margins
to relatively space out the child ui
elements
and when you preview you can see that
the sign-in dialog remains centered
even when you resize the browser window
you can also add existing components to
a layout
using the context menu which is shown on
right click select both
and right click to view the context menu
from here
i'll add it to a row layout and then
using the horizontal align properties to
select the space between option
i admit it does take a while to get used
to it but having it represented visually
can really speed up the learning process
now while we are added you can always
select the parent ui element by
selecting on the label
on the child element this is helpful
when you have nested elements
and you can achieve the same result by
selecting it in the outline view
the other interesting aspect of flex
layouts are related to grow and shrink
these affect resizing for components
when the viewport changes size
setting a component to grow will expand
a container in the row direction
if it is row layout or in the column
direction if it's column layout
going back to our basic example only the
pink container
has grow enabled the blue container has
a minimum height
and width of 50 pixels defined but the
grow is disabled
which is the default and when we preview
as we adjust the size of the browser
window you can see
only the pink container changes size
to try this yourself you can start with
one of the preset layouts when you
create a new app
here you will find examples of layouts
where we mix and match the fixed
and the flexible sections this
ends our quick intro into flex layouts
available in the indigo app builder
to summarize quickly whatever you have
already
known about flex layouts can be used
here in the editor as is
for someone new to flex and css it'll
take some getting used to
but over time it will become a lot
easier to think about layouts as rows
and columns
in addition to this there are some great
resources on the web
to learn flex concepts in more detail
you have csstricks.com mdn flex topics
and if you want a more fun learning
experience you can even try flexbox
froggie
a game-like experience developed to
teach you about flex
we are also considering other layout
options so reach out and let us know
what
you will find more useful that's all for
now