1.0 Traditional layout vs. Flex Layout

1.1 Traditional Layout

  • Good compatibility
  • The layout and trival
  • Limitations, can no longer move the layout well

1.2 the flex layout

  • Easy to operate, extremely simple layout, mobile terminal is widely used
  • PC browser support is poor
  • IE11 or earlier does not support Flex or only partially

1.3 suggest

  • If the page layout is on the PC, use the traditional method
  • Use Flex if you are on mobile or don’t consider compatible PCS

2.0 Flex layout principles

  • Flex, short for Flexible Box, is used to provide maximum flexibility to Box models, and any container can be specified as a Flex layout.
  • When we set the parent box to flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.
  • Flex layout is also called flex layout, elastic layout, flex box layout, or elastic box layout
  • Elements with a Flex layout are called Flex containers (Flex)

Container, for short. All of its child elements automatically become container members and are called Flex items, or “items.”

Summary: You can control the placement and arrangement of child boxes by adding flex properties to the parent box

3.0 Common attributes of the parent item

  • Flex-direction: sets the spindle direction
  • Context-content: Sets the arrangement of child elements on the main axis
  • Flex-wrap: Sets whether a child element is wrapped on a line
  • Align-content: Sets the arrangement of children on the side axis (multiple lines)
  • Align-items: Sets the arrangement of child elements on the side axis (single row)
  • Flex-flow: compound property, equivalent to setting both flex-direction and flex-wrap

3.1 Flex-direction Sets the spindle direction

  • In flex layout, there are two directions: the main axis and the side axis, also called row and column, x and Y axis
  • The default principal axis is the x axis, horizontal to the right
  • The default side direction is the y direction, horizontal down

  • Note: the main axis and side axis can change depending on which flex-direction is set to the main axis, leaving the side axis. And our children are arranged along the principal axis

3.2 context-content Sets the arrangement of child elements on the main axis

3.3 flex-wrap Sets whether to wrap a line

  • By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines no line breaks in flex layouts by default.
  • Nowrap non-breaking
  • Wrap a newline

3.4 align-items Sets the arrangement of child elements on the side axis (single row)

  • This property controls the arrangement of the children on the side axis (default is the y axis) when the children are single (single row)
  • Flex-start starts in the header
  • Flex-end starts at the end
  • Center is displayed in the center
  • Stretch the tensile

3.5 align-content Sets the arrangement 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 on a single line.

3.6 Difference between align-content and align-items

  • Align-items work on a single line, with only up-aligned, down-aligned, centered, and stretched
  • Align-content is suitable for line feed (multiple lines) (not valid for single line). You can set up, down, center, stretch, and evenly allocate the remaining space.
  • So the summary is single line for align-items and multiple lines for align-content

3.7 Flex-flow is a compound property of flex-direction and flex-wrap

flex-flow:row wrap;
Copy the code

4.0 Common Properties of Flex layout subitems

  • Number of flex subprojects
  • Align-self controls how the children align themselves on the side axis
  • The order attribute defines the order in which the children are sorted (sequential)

4.1 the flex property

The Flex property defines the amount of remaining space allocated to a subproject, using Flex to indicate how many shares.

.item { flex: <number>; /* Default value 0 */}Copy the code

4.2 align-self controls the alignment of the sub-items themselves on the side axis

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property.

The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

Span :nth-child(2) {/* Align -self: flex-end; }Copy the code

4.3 The order property defines the order of items

The smaller the value is, the more advanced it is. The default value is 0.

Note: Not the same as z-index.

.item {
    order: <number>;
}
Copy the code