Screen Layout Using Flex

Learn about and practice using flex to make your layouts better.

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.

Get hands-on with 1300+ tech skills courses.