This is the 7th day of my participation in Gwen Challenge

1. The flex layout

Flex layout (elastic layout), used to provide maximum flexibility for box models, any container can be specified as a Flex layout (whether block-level elements or inline elements)

  • When we set the parent box to flex layout, the float,clear, and vertical-align attributes of the child elements are invalidated

  • Flexible layout = Elastic layout = Elastic box layout = Elastic box layout = Flex layout

  • An element with a Flex layout is called a Flex container, or “container,” and all of its children automatically become members of the container, called a Flex project, or “Project.”

Add a Flex element to the parent element and control the child element

2. Common parent attributes

  • 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 child elements 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

2.1 Main shaft and side shaft

In flex layout, there are main and side axes, also called rows and columns, x and Y

  • The default principal axis is the x axis, horizontal to the right
  • The default lateral orientation is the Y-axis method, horizontal and downward

The flex – direction: row column

3. Common subattributes

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

viewport

== Viewport (viewport)== is the browser display page content screen area, viewport can be divided into layout viewport, visual viewport and ideal viewport

  • The width of the viewport layout should be the same as the width of the ideal viewport
  • You need to manually fill in the meta viewport label to inform the browser

Meta Viewport label

<meat name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0">
Copy the code
attribute explain
width The width is the viewport width, and you can set a special value of device-width
initial-scale Initial scaling ratio, number greater than 0
maximum-scale Maximum scaling ratio, numbers greater than 0
minimum-scale Minimum scale ratio, numbers greater than 0
user-scalable Whether the user can zoom, yes or no (1 or 0)
  • Background-size: Width of background image height of background image

Just write one argument, and the other one will be proportional

  • Link removal highlighting

-webkit-top-high-color:transpant;

Streaming layout (percentage layout)

  • Instead of using fixed pixels, use percentages
  • Max-width Maximum width (max-height maximum height)
  • Min-width Minimum width (min-height minimum height)