Realizing beautiful pages is one of the core competencies of front-end engineers. CSS layout technology is the core technology for realizing beautiful pages, but CSS layout is easy to get started, but difficult to master. As users' aesthetic standards become higher and higher, front-end pages have higher and higher requirements for exquisiteness and practicability. A deep grasp of CSS layout can improve competitiveness faster.
flex
Flex is the abbreviation of Flexible Box, which means "elastic layout" or "flexible box". It is a new layout mode in CSS3, which can realize various page layouts in a simple, complete and responsive manner. Works great for any screen size and device type. Currently, almost all browsers support Flex layout. Flex layout is also often called flexbox. After using flex layout, it provides powerful space allocation and alignment capabilities for child elements. Elements that adopt Flex layout are called flex containers, or "containers" for short. All of its child elements automatically become members of a container called a flex item, or "item" for short. The container has two axes by default, the horizontal main axis and the vertical cross axis. The start position of the main axis is called main start, and the end position is called main end; the start position of the cross axis is called cross start, and the end position is called cross end. Items are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied by a single item is called cross size. As shown below: