How To Use Flex Layout

In this video, you'll learn how to use Flex Layout to create responsive page designs.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com...

Transcript

In this video, you'll learn how to use Flex Layout to create responsive page designs.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com... 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