hello and welcome to another training
video from ex and pro today we'll be
looking at how to use the Flex layout
section of the block styling manager as
a prerequisite you should have only gone
through the video on how to use the
block styling manager if not then I
recommend doing that first flex styles
are a way to layout your page that is
responsive this means that no matter
what the size of the screen you're
looking at the page with the layout will
respond and fit to the screen let's say
you have a box with some boxes inside of
it to enable the Flex styles you must
click enable for the Flex container
option on the container element or set
its display to Flex the direction option
dito determines which direction the
content will go row is left to right
reverse row is right to left column is
top to bottom and reverse column is
bottom to top the justify option
determines how the contents are laid out
start and space between which puts space
between space around which put space
equal amount of space around each item
and center note that if any of the
contents have a grow value the justify
option will look the same no matter what
you choose the Alliant option determines
how the contents are laid out along the
cross access that is perpendicular to
the direction we have start and stretch
which will fill the space the available
space and center the rest of the options
are for the contents of a of a Flex
container grow determines whether the
item is allowed to grow to fit the
container if multiple items have a grow
value greater than 0 they take up a
ratio of the available space this is one
to one and the
1 to 9 and 1 to 9 to 1
shrink determines whether an item is
allowed to shrink if the screen is too
small or its siblings take up too much
space
note that shrink won't work if you have
a minimum width or height on the object
you can see the green box is shrinking
when this item gets bigger basis
determines the default size of the
object along its direction axis the
cross axis size should be determined by
the dimension either height or width and
then align overrides its containers
align value so start and stretch and
center as apparent is already Center
this looks the same this has been how to
use flex layout
