Common parent attributes

Flex-direction: sets the spindle direction

(The main axis is y, the side axis is x, and vice versa)

Default X-axis (left to right) : row

From right to left: row-reverse

Y-axis (top to bottom) : Column

Bottom-to-top: column-reverse

Context-content: Sets the arrangement of child elements on the main axis

Flex-start: The default value is start from scratch

Flex-end: start at the end

Center: center the spindle

Space-around: Allocates the remaining space evenly

Space-between: edges on both sides and then halves the remaining space

Flex-wrap: Sets whether the element is wrapped

Nowrap: Default, no line breaks

Wrap: a newline

Align-content: Sets the arrangement of child elements on the side axis (multiple lines)

// The side axis is up and down, or down or up and down centered

Flex-start: Starts at the head of the side axis by default

Flex-end: start alignment at the end of the side axis

Center: displays in the middle of the side axis

Space-around: The child bisects the remaining space on the side axis

Space-between: subitems are first distributed at both ends of the side axis, and then the remaining space is divided

Stretch: Sets the height of the child element to equal the height of the parent element

Align-items: Sets the arrangement of child elements on the side axis (single row)

Flex-start: defaults from top to bottom

Flex-end: from bottom to top

-Leonard: You’re in the center

Stretch: stretch

Flex-flow: compound property, equivalent to flex-direction and lex-wrap

Common attributes of children

Flex: The number of copies of the subproject

Align-self: Controls the alignment of children on its side axis

Allows a single item to have a different alignment than other items, overriding the align-items property

Default value: auto, inheriting the align-items property of the parent element. If there is no parent element, it is equivalent to stretch

Order: Attribute defines the order of children (sequential)

The smaller the value, the more advanced it is. The default value is 0, which is different from z-index

Background linear gradient

background:linear-gradient(Starting direction, color1And the color2,...). ;Copy the code

Background gradient must be prefixed with browser private

The starting direction can be: azimuth noun or degree, or top if omitted

  • Male _ no. ❤; Front-end honest person, you can exchange and learn with small partners! Bloggers will do their best to help you!