Share personal style classes encapsulated in the project using Flex layout

The following are the style classes that I have encapsulated in my project using flex layout

Flex layout examples and source code

1. Basic Concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

2. Container properties

• flex-direction

  The flex-direction property determines the direction of the spindle

  

• flex-wrap

  If an axis does not fit, define how to wrap it.

  

• flex-flow

  The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

• justify-content

  The context-content attribute defines the alignment of items on the main axis.

  

• align-items

  The align-items property defines how items are aligned on the cross axis

  

• align-content

  The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.