Screen Layout Using Flex

In this lesson, we’ll learn to arrange the elements in the view. Everyone who has worked with CSS should know about Flexbox.

Flexbox works similar to CSS, with a few minor changes like:

• flexDirection has a default value of column instead of row.

• alignContent has a default value of flex-start instead of stretch.

• flexShrink has a default value of 0 instead of 1.

Tip: Using justifyContent, alignItems and flexDirection help you achieve your desired layout.

The flex element

The flex element is used to specify how much space the child elements can take up.