Table of contents
Two, set the elastic box - display property
3. Horizontal center alignment
4. Horizontally align both sides with a margin in the middle
6. The distance between elements in the horizontal direction is evenly distributed
5. Elastic cross-axis alignment
1. Sub-elements are aligned on the cross axis/vertical direction
Six, flexible layout multi-line arrangement
1. Set sub-element wrapping/multi-line arrangement
4. Horizontal center alignment
6. In the horizontal direction, both sides are aligned with the middle to leave a margin
7. The distance between elements in the horizontal direction is evenly distributed
Seven, flexible layout axis direction reversal
1. The arrangement order of the main axis elements is reversed
1. The direction of the multi-row arrangement of the cross axis is opposite
2. The end direction of the cross axis is reversed to the upward direction
2. Arrangement direction of flexbox elements
1. What is an elastic box?
- Flexbox is a new layout mode in CSS3 .
- The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align and allocate blank space for child elements in a container
- Easy to operate, simple layout, widely used on mobile terminals
- PC browser support is poor
- Not supported or partially supported in IE11 or lower versions
- More flexible in the box model
- The content of the flex box model includes: flex container, flex child elements - items
- Principle: Set the flex attribute for the parent element to control the position and arrangement of the child elements
- Application scenario: mobile terminal
2. Set the elastic box - display property
display: flex; Display the object as a block-level flex box
Set flexbox properties for container box/parent label
When the overall size of the sub-label exceeds the parent label, the sub-label will shrink the control of the parent label by default
There is no problem with the height of the parent label collapsing
display: inline-flex; Display the object as an inline block-level flex box
Notice:
After the container is set to a flex layout, the float, clear, and vertical-align attributes in the child elements will be invalid
Elastic child elements - similar to inline block elements, if the width and height are not set, they will be expanded by the content; even inline elements can also set width and height
3. Basic concepts
flex container, item - elastic child element
By default there are two axes in the container
Default spindle direction - x-axis direction, horizontal to the right (the left side is the starting point of the main axis, and the right side is the end point of the main axis)
Default cross axis direction - y-axis direction, horizontally downward (the upper part is the starting point of the cross axis, and the lower part is the end point of the cross axis)
Flex child elements are usually displayed on a single line inside a flex box. By default each container has only one row.
Note: The main axis is not necessarily the x-axis, it can also be the y-axis, one side is the main axis, and the other side is the side axis
Horizontal is the main axis direction and vertical is the cross axis direction
4. Sorting method
1. Horizontal Left Alignment
justify-content: flex-start;
2. Horizontal right alignment
justify-content: flex-end;
3. Horizontal center alignment
justify-content:center;
4. Horizontally align both sides with a margin in the middle
justify-content: space-between;
5. In the horizontal direction, the margin in the middle is twice as large as the margin on both sides
justify-content:space-around;
6. The distance between elements in the horizontal direction is evenly distributed
justify-content:space-evenly;
5. Elastic cross-axis alignment
1. Sub-elements are aligned on the cross axis/vertical direction
align-items: flex-start;
2. Vertical center alignment
align-items:center;
3. Align down vertically
align-items:flex-end;
4. The height of the child element is stretched to fit the height of the parent label. Note that the height of the child element is not set by default to have an effect
align-items:stretch;
Six, flexible layout multi-line arrangement
1. Set sub-element wrapping/multi-line arrangement
flex-wrap: wrap;
2. Horizontal left alignment
justify-content: flex-start;
3. Horizontal right alignment
justify-content: flex-end;
4. Horizontal center alignment
justify-content:center;
5. In the horizontal direction, the margin in the middle is twice as large as the margin on both sides
justify-content:space-around;
6. In the horizontal direction, both sides are aligned with the middle to leave a margin
justify-content:space-between;
7. The distance between elements in the horizontal direction is evenly distributed
justify-content:space-evenly;
Seven, flexible layout axis direction reversal
1. The arrangement order of the main axis elements is reversed
1. The direction of the multi-row arrangement of the cross axis is opposite
flex-wrap:wrap-reverse;
2. The end direction of the cross axis is reversed to the upward direction
align-content: flex-end;
2. Arrangement direction of flexbox elements
1.flex-direction attribute: set the direction of the main axis and the arrangement direction of the child elements
2.flex-direction: row; default value, the main axis direction is horizontal, and the starting point is at the left end
3.flex-direction: row-reverse; The direction of the main axis is horizontal, and the starting point is at the right end
4.flex-direction: column; The direction of the main axis is vertical, and the starting point is at the top
5.flex-direction: column-reverse; The direction of the main axis is vertical, and the starting point is below
