Flex box flex attribute

+flex Elastic element

        => Change everything Sub level The arrangement of elements

        => When you set up display flex It's time

        => Elastic parent : Set up display flex Get element

        => Elastic children : All its child elements

+ Properties of the elastic parent

       1. flex-direction  Indicates the spindle direction

       +  The default value is :

                row:  Indicates horizontal arrangement ,  From left to right ,  The side axes are arranged vertically from top to bottom

      +  Optional value :

                row-reverse:  Indicates horizontal arrangement ,  From right to left ,  The side axes are arranged vertically from top to bottom

                column:  Indicates vertical arrangement ,  From top to bottom ,  The side axes are arranged horizontally from left to right

                column-reverse:  Indicates vertical arrangement ,  From bottom to top ,  The side axes are arranged horizontally from left to right

    2. justify-content  Indicates the arrangement of elements in the spindle direction ( Do not change element order )

      +  The default value is : 

        flex-start:  All elements are stacked at the start of the spindle

      +  Optional value :

        flex-end:  All elements are stacked at the end of the spindle

        center:  All elements are centered

        space-between:  All blanks are filled in between the two ( The top grid of the left and right elements )

        space-around:  All white space surrounds each child element twice

          =>  The blank space is  200px

          =>  Is the total  6  Elements

          =>  Just put  200  It is divided into  12  Share

          =>  Put a copy of each element on one side

        space-evenly:  Means to divide all blank spaces equally

          =>  The spacing between each element

          =>  It is consistent with the spacing between elements and edges of the two passes

          =>  Be careful :  This value   Android   I won't support it ,  Only  IOS  Support

    3. aline-items  Indicates the arrangement of the side axes

      +  Premise :  When the child element does not wrap ( When there is only one line )

        =>  Multiple lines can also take effect ,  But not as we thought

        =>  Is to go to the specified position on the side axis of the child

      +  The default value is :

        flex-start:  Indicates that the arrangement is at the beginning of the side axis

      +  Optional value :

        flex-end:  Indicates that the arrangement is at the end of the side axis

        center:  Indicates that the arrangement is at the center of the side axis

    4. flex-wrap  Indicates whether line wrapping is enabled

      +  The default value is :

        no-wrap:  Indicates that line breaks are not allowed

      +  Optional value :

        wrap:  Indicates that line breaks are possible

      +  Line break rules

        1.  Calculate how many lines you can change (3 That's ok )

        2.  Divide the side shaft into three parts ( Divide three equally )

        3.  The side shaft does not squash elements ,  If you go out, it will overflow directly

    5. aline-content  Indicates the arrangement of the side axes ( Multiple lines )

      +  Premise :  You have to turn on line feed ,  When there are multiple lines of elements

      +  Set rules :

        =>  Think of each line as a whole

        =>  When setting ,  Is a unit of behavior

        =>  Set with the integral side shaft

      +  The default value is :  No,

      +  Optional value :

        flex-start:  All units stack at the beginning of the side axis

        flex-end:  All units are stacked at the end of the side axis

        center:  All units are stacked in the middle of the side axis

        space-between:  The blank space on all side axes is equally divided between every two units

          =>  Top grid of upper and lower units

        space-around:  The blank space on all side axes is evenly surrounded on both sides of each unit

        space-evenly:  The units on all the side axes are evenly distributed in the middle position

     When there is no child element inside an element ,  Only the text

      +  Will treat all text content as a child element

    6.flex-flow  Is a collection of two properties

      +flex-direction and flex-wrap Set

Attributes on elastic children

        

1. aline-self  Represents the side axis arrangement of a single element

      +  The default value is :  Follow the parent's side axis arrangement settings

      +  Optional value :

        start:  It means that I am arranged separately at the beginning of the side axis

        end:  It means that I am arranged separately at the end of the side axis

        center:  It means that I am arranged separately in the middle of the side axis

      +  More time to go

        =>  How often do your child elements line up ,  The child elements on each row have their own independent row side axes

        =>  It moves on its own independent side axis

        =>  When your elastic parent has set the multi row side axis arrangement ,  The independent side axis of each element is the same

    2. flex  Say how many shares you have in the total

      + flex:  Numbers ;

      +  Each child element can be set  felx  It can also be set without

      +  You need to set everything up  felx  The value of the element of the attribute   Sum up (10)

      +  Each element is set to  flex  Why ,  Just stand   A few tenths

      +  Is the value of all the child elements after the fixed width is set

      +  Elastic width

      +  When you set the elastic width

        =>  There will be content squeeze behavior

        =>  When the content is squeezed ,  Priority extrusion   elastic   The element of width

        =>  Until the width of the elastic element can no longer be squeezed ,  Extrude fixed width elements

        =>  Until all the elements can no longer be squeezed ,  It will overflow

    3. order  Indicates the sort position you are in

      + order:  Numbers ;

      +  Determine your own sort position

      +  Set their order relationship

      +  The larger the number, the more backward it is