Layout Principle: Flex stands for Flexible Box and is used to provide maximum flexibility for Box models. Any container can be specified as a Flex layout. When we set the flex layout for the parent box, the float, float, clear, and vertical-align properties of the child elements are invalidated. Flex layout Elements that adopt a Flex layout are called Flex containers, or “containers” for short, and all of their child elements automatically become members of the container, called Flex projects, or “items” for short. Common attributes of the parent box: \

Flex-direction: sets the spindle direction. \ the justify - the content: \ flex-wrap: Set the arrangement of child elements on the main axis \ align-content: Set the arrangement of child elements on the side axis (multiple lines) \ align-items: Set the arrangement of child elements on the side axis (single line) \ flex-flow: Compound property, equivalent to both flex-direction and flex-wrap ** * context-content: Sets the mine-expuning method for child elements on spindle ** * verify spindle orientation ** before useCopy the code



Flew -wrap sets whether a child element is newline

By default, items are arranged on a single line (aka “axis”), as defined by the Flex-wrap property, and there are no line breaks in Flex layout by default.



Align-items Sets the mine-clearing mode of child elements on the side axis (single line)

This property controls how the children are arranged on the side axis (default is the y axis) and is used when the children are single items.



Align-content Sets the mine-clearing mode of child elements on the side axis (multiple lines)

Sets the arrangement of children on the side axis and can only be used when children break a line (multiple lines), it has no effect under a single line.

The difference between align-content and align-items

Align-items work for single line cases, with only up to it, down aligned, centered and stretched

Align-content works with line feed (multiple lines) (single line does not work). You can set up, down, center, stretch, and allocate the remaining space

The summary is single line for align-items, multiple lines for align-content

Align-items works for a single line, with only up and down aligned, centered, and stretched

Align-content works with line feed (multiple lines) (single line does not work). You can set up, down, center, stretch, and allocate the remaining space

The summary is single line for align-items, multiple lines for align-content



The flex-flow property is a compound property of the Flex-direction and flex-wrap properties

flex-flow:row wrap;

conclusion



Flex layout subitem common property \

\ align-self Controls how the items align themselves on the side axis \ Order defines the order of the items \ flex defines the remaining space for the items \ syntax:. Item (flex:<number>; /* default 0 */}\ align-self controls how children align themselves on the side axis \ align property allows a single item to be aligned differently from other items, overwrites the align-items property, default is auto, Inheriting the align-items property of the parent element, \ if there is no parent element, is equivalent to stretch. \Copy the code

Span: NHT -child(2){align-eslf: flex-end; } The order attribute defines the order of items: the smaller the value, the higher the order, default to 0; Note: Not the same as z-index. This flex Box content sharing, everyone’s encouragement, is the power of my output. Come on!