Flex flexible box layout

flex yes flexible box Abbreviation , That is to say “ Elastic layout ”, To provide maximum flexibility for the box model , Any container can be specified as flex Layout ;

flex Containers ： use flex Elements of layout , A container ;
flex project ： use flex Elements of layout （ That is, the parent element ） Child elements , I.e. project ;
（ This article mainly lists flex The basic meaning and properties of elastic box , Don't explain in too much detail ！）

 

        The container has two axes by default ： Horizontal spindle （main axis） And the vertical cross axis ( Side axle )（cross axis）, Two axes are always vertical . Starting position of spindle （ The intersection with the border ） be called main start, The ending position is called main end; The starting position of the cross axis is called cross start, The ending position is called cross end.
Sub items are arranged along the main axis by default . The spindle space occupied by a single project is called main size, The cross axis space occupied is called cross size.

notes ：① The element that sets the elastic box will not be separated from the document flow , And it has adaptive characteristics

        ② When the parent element is an elastic box , The width and height of elements that are not block level elements can also be set directly

---

flex Container attribute

1、display:flex 、inline-flex                                                                                           

 Be careful ： Set parent element to  Flex  After the layout , Of its children float、clear and vertical-align Property will fail .

Telescoping layout = Elastic layout = Expansion box layout = Elastic box layout = flex Layout

2、flex-direction attribute   Determine the direction of the spindle （ That is, the arrangement direction of the project ）                                        

flex-direction: row（ Default level ） | row-reverse | column（ The longitudinal ） | column-reverse;

3、flex-wrap attribute   Defines whether child elements are displayed in a new line                                                                     

flex-wrap: nowrap（ Don't wrap ） | wrap（ Line break ） | wrap-reverse;（ Reverse wrap ）

4、 flex-flow                                                                                                                      

flex-flow The attribute is flex-direction Properties and flex-wrap Attribute shorthand , The default value is row nowrap;

5、 justify-content attribute   Define the project in the spindle （） Alignment on .                                      

justify-content: flex-start | flex-end | center | space-between | space-around;

6、align-items attribute   Define the project on the side axis ( A single ) How to align on .                                                

align-items: flex-start | flex-end | center | baseline | stretch（ The default value is ）;

7、align-content attribute   Defines the alignment of multiple axes .（ For single row child elements , This property does not work ）

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content When performing the pattern on the side axis , Will give the default spacing to merge . For single row child elements , This property does not work 

notes ：

flex-start： Align with the starting point of the intersecting axis .
flex-end： Align with the end of the cross axis .
center： Align with the midpoint of the intersecting axis .
space-between： Align with both ends of the cross axis , The average distribution of spacing between axes .
space-around： The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .
stretch（ The default value is ）： The axis occupies the entire cross axis .

（ You can knock it yourself to see the specific effect ）

---

flex Item attribute

1、align-self attribute                                                                                                                    

（Internet Explorer  and  Safari  Browser does not support  align-self  attribute ）
 explain ：
    align-self  Property specifies the alignment of the selected items in the flexible container .
     Be careful ：align-self  Property can override the flexible container's  align-items  attribute .
     Property value 
        auto         The default value is . The element inherits the... Of its parent container  align-items  attribute . If there is no parent container  "stretch".
        Stretch      The elements are stretched to fit the container .
        Center       The element is in the center of the container .
        flex-start       The element is at the beginning of the container .
        flex-end         The element is at the end of the container .

2、order                                                                                                                                

 explain ：
    order: number;  Sort priorities , The bigger the number, the more it goes to the back , The default is 0, Support negative numbers .

3、flex                                                                                                                                   

 explain ：
     Compound attribute . Set or retrieve how the child elements of the elastic box model object allocate space 
     Detailed attribute values ：
         abbreviation 「flex: 1」,  Then the calculated value is 「1 1 0%」
         abbreviation 「flex: auto」,  Then the calculated value is 「1 1 auto」
        flex: none」,  Then the calculated value is 「0 0 auto」
        flex: 0 auto」 perhaps 「flex: initial」,  Then the calculated value is 「0 1 auto」, namely 「flex」 Initial value 

4、flex-xxx                                                                                                                               

 The values of the following three attributes are all one number value 
（1）flex-grow
    flex-group Property is used to control whether the current item is enlarged . The default value is 0, It means that the display will not be enlarged even if the container has remaining space . If set to 1, After the average allocation, the display will be enlarged .
（2）flex-shrink
    flex-shrink Attribute represents the reduction of the element . The default value is 1, If there is not enough space, all projects will shrink year-on-year . If the attribute of an item is set to 0, When the space is insufficient, the project will not shrink .
（3）flex-basis
    flex-basis Attribute represents the value indicating that the item occupies the spindle space . The default is auto, Indicates the current default size of the project . If set to a fixed value , Then the item occupies a fixed size in the container .

Small cases

（1） Simple layout of dice

 （2） Holy Grail layout and fixed low column layout

 （3） Little newspaper

（ As for too much code , Don't put it on, hahaha ！ If necessary, please confide in me ）