Use Flex

Flex styles are a way of changing the layout of the page so it is responsive. When using Flex, the layout and position of the Blocks will respond to fit the screen, which is important in ensuring that users have a good user experience regardless of the screen size they are viewing your Application on.
It is recommended that you read the article listed below to improve your understanding of Devices and the Style Manager.
​Device​
​Style Manager​
​How to Use Style Manager and Devices​
Enabling Flex Styles
To enable Flex styles, follow the steps below:
1.Select the parent Block of the Blocks you want to configure the position for.
2.Click on Block Styling.
3.Choose Flex for the display or enable the flex container.
Flex Container
Direction
The direction determines which direction the content will go. It can either be:
1.Row - Left to right
2.Reverse row - right to left
3.Column – Top to Bottom
4.Reverse column – Bottom to Top
Justify
Justify determines the way the contents are laid out. It can either be:
1.Start
2.End
3.Space Between (puts spaces between the Blocks)
4.Space Around (puts an equal amount of space around each Block)
5.Center
Align-Items
Determines the vertical alignment of the Blocks. It can either be:
1.Start 
2.End
3.Stretch
4.Center
Blocks inside the Flex Container
Grow
Grow will grow the item to fit the container.
If multiple Blocks have a grow value greater than 0, they will take up a ratio of the available space.
Shrink
Shrink determines whether an item is allowed to shrink if the screen is too small or if other Blocks take up too much space. Shrink will not work if the Block has a minimum width or height.
Basis
This determines the default size of the object along its direction axis.    
Order
The order will change the order of the Blocks. Blocks with no order will be displayed first, followed by the ordered Blocks going in ascending order.
Align-Item
Aligns the individual Blocks. They can either be:
1.Start
2.End
3.Stretch
4.Center
Further Reading
​How to Design Pages for Mobile​