Traditional layout : good compatibility, cumbersome layout, limitations, not good layout on the mobile terminal
flex flexible layout : easy to operate, extremely simple layout, mobile terminal application is very extensive,
PC terminal browser support is poor, ie11 lower version Not supported or only partially supported
Common parent attributes (control child elements, controlled by the father)
1. flex-direction : set the direction of the main axis (x axis) [the main axis and the side axis can be converted to each other, depending on which direction is set to the main axis] (row [x-axis default], row-reverse[flip from right to left] ,column[the main axis is the y-axis])
2.justify-content : set the arrangement of the sub-elements on the main axis (determine which direction is the main axis before use) default From left to right (flex-start), flex-end (arranged from right to left), center (aligned in the center), space-around (equalize the remaining space), and space-between (the left and right elements are pasted on both sides first,
Divide the remaining space equally) 3. flex-wrap : Set whether the child element wraps (default (nowrap) if a line cannot be opened, it will be hard placed in one line, so the width of other (element) boxes will become smaller) (setting wrap will proceed Line break)
4.align-content : Set the arrangement of the sub-elements on the lateral axis (y-axis vertically downwards) (applicable to multi-line arrangement, invalid in the case of single line), flex-start (default value is on the lateral axis and y-axis Start to arrange at the head), flex-end (arrange at the end of the lateral axis), center (display in the center of the lateral axis), space-around (the children distribute the remaining space equally on the lateral axis), space-between (child elements Distribute at both ends of the side axis first, distribute the remaining space equally), stretch (set the height of the child element to divide the height of the parent element evenly).
5. align-items : Set the arrangement of sub-elements on the lateral axis (applicable to single-line arrangement) center (vertically centered), flex-start vertically on the top, stretch (stretch along the y-axis, but do not give height to the sub-elements)
6.flex-flow; Composite attribute, equivalent to setting both flex-direction and flex-wrap (flex-flow: row wrap)
Common sub-element attributes
flex:number > (Define sub-elements (allocate remaining space), use flex to indicate multiple shares, 0 for 0 shares, 1 for 1 share...)
{Case Holy Grail Layout}==> The left side is fixed, the right side is fixed, and the middle is adaptive (and fixed width and height are given on the left and right, and the middle element is set flex:1).
If there is a parent element and three child elements, flex:1 does not set the width for the child elements , 3 child elements will evenly allocate the remaining space of the parent element. If the space occupied by the second child element wants to be larger, set
flex: 2 (or greater) for him .
align-self：> In this way, a certain child element can be controlled (the child element controls itself).
order:> Control the order of the modules, the smaller the number, the higher the order, the default is 0, so you can set a negative value for the box order, put the module in the front, or set a number greater than 0 and put the module in the back.