Responsive Design - Flex Concept

In order to deal with different screen sizes of mobile devices, we apply flex concept to design a responsive layout to solve the problem. There're five key setting of flex concept which are Flex, Flex Direction, Justify Content, Align Items & Align Self.

Flex

Flex specifies the distribution in the space ratio of the components inside the same container. Input the number to represent the ratio. Flex=1 which means the full space is occupied. As the example below, 2 components inside the same container are set with Flex:1 and Flex:2 corresponding.

Flex Direction

Flex Direction specifies the direction of the components.parent-child relationship. Flex Direction provides 2 formats: 1.Column(default): From top to bottom 2.Row: From left to right

As the example below, Flex Direction is set as "Row" from the outside container so that all containers inside will be placed along main axis.

Justify Content

Justify Content aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Justify Content provides 3 formats:

1.Flex-Start(default): components are packed toward the start of the line.

2.Flex-End: components are packed toward the end of the line.

3.Center: components are packed toward the center of the line.

The main-axis will be changed when Flex Direction is switch from Column to Row. When Flex Direction set to Column, Justify Content affect the container inside itself on the vertical axis as below.

When Flex Direction set to Row, Justify Content affect the container inside itself on the horizontal axis as below.

Align Items

Align Items specifies the default alignment for items inside the flexible container. Align Items provides 3 formats:

1.Flex-Start(default): components are placed flush with the cross-start edge of the line.

2.Flex-End: components are placed flush with the cross-end edge of the line.

3.Center: components are centered in the cross axis within the line.

The main-axis will be changed when Flex Direction is switch from Column to Row. When Flex Direction set to Column, Align Items affect the container inside itself on the horizontal axis as below.

When Flex Direction set to Row, Align Items affect the container inside itself on the vertical axis as below.

Align Self

Align Self specifies same as align items, but the difference is the setting on child component.