Flex flex flex box layout 2

Flex Elastic box layout 2

Project properties

order Define the sequence of items , The smaller the number, the higher the order , The default is 0

Define the sequence of items . The smaller the numerical , row C:\Users\12435\Desktop\6.13 Classroom \flex.html The more forward the column , The default is 0

order: <1>; Recommended as 0 perhaps Non-negative integer , Set up order attribute , According to order The value size of the attribute is arranged

flex-grow Define the magnification of the project , The default is 0, That is, if there is any remaining space , And don't zoom in ( The main functions are ： Allocate the remaining space )

flex-grow: <number>; It can't be negative , Although it can be set to positive and small values , It's not usually used in this way

The meaning of average distribution is , Divide the space after removing the content , If you have more content , Although equally divided , But it still takes up a large space

flex-shrink It defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink ( The main function is to narrow the space )

flex-shrink: <number>; Negative values are not valid for this property , The larger the value, the smaller the scale

flex-basis Define before allocating extra space , Spindle space occupied by the project

stay flex-grow   and flex-shinrk Before attributes work , Define each flex The default size of the project , Its default value is auto, The original size of the project

flex-basis: auto || <length>; length: We usually use some attribute values , Such as px 、 % 、 rem etc. , Priority ratio width Be big , His width includes border and padding Value , Similar to the weird box model .

flex Is a composite attribute , representative flex-grow, flex-shrink and flex-basis Abbreviation

align-self Define the alignment on the cross axis

Two quick values

flex：auto representative (1 1 auto)

flex：none representative (0 0 auto)

align-self Cross alignment on the axis , Allow a single project to have a different alignment from other projects , covering align-items attribute

The default value is auto, Represents the... That inherits the parent element align-items attribute

May take 6 It's worth , except auto, Everything else goes with align-items The attributes are exactly the same

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Little knowledge :

calc: If we still 100% View , But I don't want it to happen 100% What to do with that   Add... To our width calc, Plus is more than 100% Multiple views 100 Scroll bar , Less will be less 100 Distance of , Note that we are going to + or - A space must be added to the left and right of . I won't support it IE8 The following browsers .

var() Modify the color value , He needs to be with :root Elements are used in conjunction with , How to use it is shown in the figure , The advantage is that we can match colors uniformly . But this attribute can only be used in highly configured browsers ,IE11 The following browsers do not support .

iframe label You can nest a html page ,frameborder Frame , Generally set as 0.