Flex layout, also known as elastic layout. It is the core of modern HTML and was released in CSS3.0.
    In the era of Deamweaver MX, most web page layouts still used tables. Nesting a Table within another Table.
        
    So, why use the flex layout of div?
        
    Firstly, in CSS3.0, media query, also known as @media, was introduced. In other words, web pages can apply different CSS styles based on the width or height of the browser or screen. This allows content to be displayed in columns on narrow screens and in rows on wide screens. As a result, the same div can have different display positions and effects on different page widths. This breaks the rigid page layout of the table where rows are rows and columns are columns.
        
    Secondly, before the emergence of flex layout, organizing all divs was a very difficult task. You need to align the coordinates and width/height of each div one by one.
        
    Flex layout is a streaming layout that you can present divs horizontally, as shown in the following code:
    {
        display:flex;
        flex-direction:row;/* Spindle: Row*/
        flex-wrap:wrap;/* Line break exceeds the total width. (Default nowrap, compresses the width of each cell without line breaks by default)*/
    }
        
    You can also present divs streaming layout vertically, as shown in the following code:
    {
        display:flex;
        Flex direction:column;/* Spindle: column*/
        Flex wrap: wrap;/* Jump to another column while beyond total height. (Default nowrap, compresses the height of each unit without changing columns by default)*/
    }
        
    Important, there are also several corresponding alignment configurations:
        
    justify-content: The adjustment method of sub elements in the main axis direction (the control of the front and rear gaps of sub elements in the main axis direction) can be flex-start | flex-end | center | space-between | space-around
    align-items: The alignment method of sub elements in the cross axis direction (such as aligning the center axis of all sub elements, aligning all sub elements along the edges) can be flex-start | flex-end | center | baseline | stretch
    flex-grow: The growth ratio of sub elements, and a single sub div that needs to be extended in length can be automatically increased by setting it to 1. However, the support for automatic growth of scrollbar tables with fixed headers is incomplete.
    ---- www.v-signon.com Learningers Co-Encouraged