Basic Concepts
The Flexbox layout, also called the Flex layout, is a flexible box layout. Its goal is to provide a more effective way of layouting and aligning, and to enable the parent element to properly allocate the spacing between child elements when the size of the child elements is unknown or dynamically changing.
The main idea is to allow the parent element to adjust the width, height, and arrangement of the child elements, so as to better adapt to the available layout space. Elements set to a flex layout can expand their child elements to fill the available space as much as possible, or shrink them to prevent overflow.
Flex layout is more suitable for small-scale layouts, and can implement various page layouts in a simple, complete, and responsive manner. However, after being set to a Flex layout, the float, clear, and vertical-align properties of its child elements will become invalid. The advantage of the Flex box model is that you only need to declare the behavior that the layout should have, without specifying the specific implementation method. The browser is responsible for completing the actual layout. When the layout involves indefinite widths and equal distribution, the flexible box layout should be given priority.
Flex layout is a complete module that includes a set of complete properties. The element that adopts the Flex layout is called a Flex container, or simply “container.” All its child elements are Flex items, or simply “items.”
