1. Know the Flex layout

Flex layouts are currently the most used layout scheme in Web development:

Flex layouts (Flexible layouts) are most commonly used on mobile devices, and are increasingly used on PCSCopy the code

Two important concepts:

The element that enables the Flex layout is called Flex Container and the direct children of a Flex Container are called Flex ItemsCopy the code

2. Flex layout model

The main axis is called the main axis:

The main axis is called main start and the main axis is called mian endCopy the code

A cross axis is called a cross axis:

We call it cross start and we call it cross end and we call it cross sizeCopy the code

3. Flex related properties

CSS properties applied to Flex Container:

flex-direction

// Flex items are arranged along the main axis from main start to main end by default // flex-direction: row; Row: along the spindle / / flex - direction from left to right: row - reverse reversal Along the main shaft of left and right to left / / flex - direction: the column column along the spindle from top to bottom / / flex - direction: Column-reverse Reverses columns from bottom to top along the main axisCopy the code

jusify-content

Jusify-content determines the alignment of flex items on main axis // flex-start (default) : Evenly // center will center along the main axis // space-between item evenly // space-between item evenly // space-around makes the edge of the item half the distance in the middleCopy the code