Good programmer Web front-end sharing CSS3 elastic box
I. Box model
box-sizing
The box-sizing attribute allows you to define specific elements that match an area in a specific way.
box-sizing
The box-sizing attribute allows you to define specific elements that match an area in a specific way.
border-box
The width and height you set for an element determines its border box.
That is, any inner margins and borders specified for an element will be drawn within the specified width and height.
The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively.
Two, elastic box model
The traditional solution to layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for special layouts, such as vertical center, which is not easy to implement.
Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models.
1, display: flex/inline – flex
Flex: Displays an object as an elastic expansion box
Inline-flex: Displays an object as an inline block expansion box
Set to elastic box (parent element added)
- Flex-direction (spindle alignment direction)
Description: The order specifies the position of elastic child elements in the parent container
Row is arranged in a horizontal row by default
Row-reverse: horizontal alignment (right-aligned, from back to front, with the last item at the top.
Column: indicates the vertical array.
Column-reverse: to reverse vertically, from bottom to top, with the last item on top
3, justify-content
Description:
The justify-content property applies to elastic containers to align elastic items along the main axis of the elastic container
■ Flex-start default, top aligned
■ Flex-end ends are aligned
■ Center and align
■ Space -between Aligns both ends and automatically allocates the middle
■ Space -around automatically allocates distance
4, flex – wrap
Description:
This property controls whether the Flex container is single or multi-row, and the direction of the horizontal axis determines the direction in which the new rows are stacked.
Nowrap: Flex container is a single line. The Flex child may overflow the container in this case
Wrap: The Flex container is multi-line. In this case, the overflow of the Flex child is placed on a new line, and line breaking occurs within the child
Wrap-reverse: reverses the wrap arrangement.
5, align-items (side axis alignment)
Description:
Alignment of side axis
Flex-start: The boundary of the lateral (vertical) starting position of the elastic box element is close to the lateral starting boundary of the row.
Flex-end: The boundary of the start position of the side axis (vertical axis) of the elastic box element is immediately adjacent to the end boundary of the side axis of the row.
Center: The elastic box element is centered on the lateral axis (vertical axis) of the row. (If the size of the line is smaller than the size of the elastic box element, the same length will overflow in both directions).
Baseline: Equivalent to ‘flex-start’ if the inner and side axes of an elastic box element are the same. In other cases, this value will participate in baseline alignment.
“Stretch” : default value. Items are stretched to fit the container.
6, align-content (alignment between lines)
Description:
This property can be used to adjust the alignment of flex rows in a flex container when there is extra space on the flex container’s side axis, similar to the <‘ context-content ‘> property that adjusts the alignment of flex items on the main axis. Note that this property has no effect on a one-line flex container.
■ Flex-start has no line spacing
■ Flex -end bottom alignment without line spacing
■ No line spacing in center
■ Space -between Aligns both ends and automatically allocates the middle
■ Space -around automatically allocates distance
■ Stretch Default value. Items are stretched to fit the container.
7, align-self (add to child element)
Description:
The align-self attribute specifies the alignment of the selected items in the flexible container.
Note: The align-self property overrides the align-items property of the flexible container.
Auto Default value. The element inherits the align-items property of its parent container. “Stretch” if there is no parent container.
The Stretch element is stretched to fit the container.
The Center element is at the Center of the container.
The Flex-start element is at the beginning of the container.
The Flex-end element is at the end of the container.
8. Introduction to flex three property values
flex-grow
Defines the zoom scale of the project. Default is 0, that is, no zoom if there is free space
flex-shrink
Defines the scaling of the project, default is 1, that is, the project will shrink if there is insufficient space. Negative values have no effect on this property.
Calculation of shrinkage :(element width * shrinkage ratio/element * sum of shrinkage ratio) * overflow width
flex-basis
Length of project
9, flex (flex-grow, flex-shrink, flex-basis)
Description:
Compound properties. Sets or retrieves how the children of the elastic box model object allocate space.
Abbreviated “Flex: 1”, the computed value is “1 1%”
Abbreviated “Flex: Auto”, the computed value is “1 1 auto”
Flex: None “, then it evaluates to “0 0 auto”
Flex: 0 auto or flex: Initial, the calculated value is 0 1 auto, that is, the initial value of Flex
10 and the order
Description:
Number Indicates the sorting priority. The larger the number is, the more it goes to the back row. The default value is 0 and negative values are supported.