There is no limit to learning. Don’t lose yourself in the ocean of knowledge.

Know what you want, stay focused, and stay true to your original purpose.

20 percent of the world’s population controls 80 percent of the wealth.

The next series of tutorials will get you to the point of being the 20 percent.

Review:

Key attributes -display

Key attribute -position

Key attribute -float

A flex explanation

1. Flex layout is an acronym for Flexible BOX.

Flex layout can be used for both block-level elements and inline block-level elements.

3. Webkit-kernel browsers need to be prefixed with -webkit.

Flex container properties

1, the flex – direction

This property determines the direction of the main axis

.flex{ flex-direction: row; // (default) Axis horizontal, left to right flex-direction: row-reverse; // Flex direction: column; // Flex direction: column; // Flex direction: column-reverse; }}Copy the code

2, flex – wrap

This property defines how to wrap lines if an axis does not fit

.flex{ flex-wrap: nowrap; // (default) flex-wrap: wrap; // flex from top to bottom: wrap-reverse; // line break from bottom to top}Copy the code

3, flex – flow

This property defines the shorthand for flex-direction and flex-wrap;

Flex {flex-flow: <flex-direction> space <flex-wrap>; }Copy the code

4, the justify – content

This property defines the alignment of items on the main axis

.flex{ justify-content: flex-start; // Justify left-justify (default) -content: flex-end; // right justify-content: center; // center justify-content: space-between; // Align both ends. And equal precent-content: space-around; // Each item is evenly spaced, so the spacing between items is twice as large as the spacing between items and the border. // The interval between items and the interval between items and the border is evenly allocated}Copy the code

5, the align – items

This property defines the alignment of items on the cross axis

.flex{ align-items: flex-start; // Align align align-items: flex-end; // Cross the end of the axis align align-items:center; Align align-items: baseline; // Align the baseline of the first line of the item align align-items: stretch; // (default) If the project is not set to height or is set to auto, the entire parent container height will be filled}Copy the code

6, the align – content

This property defines the alignment of multiple axes for multiple items. It has no effect when there is only one axis

.flex{ align-content: flex-start; // Align with the starting point of the cross axis. Align-content: flex-end: // Align with the end of the cross axis. Align-content: center: // Align with the midpoint of the intersecting axis. Align-content: space-between: // Align with the two ends of the intersecting axes, and the spacing between axes is evenly distributed. Align-content: space-around: // The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders. align-content: stretch; // (default) the axis occupies the entire cross axis. } all of the above attributes are container attributesCopy the code

Flex project properties

1, the order

This property determines the order of items, the smaller the value. The farther up the line.

.box{ order: number; // Default is 0, which item to move forward with order set to negative. }Copy the code

2, flex – turns up

This property determines the magnification of the project.

.box{ flex-grow: 5; // Default is 0}Copy the code

3, flex – the shrink

This property determines the scaling of the project.

.item { flex-shrink: number; // Defaults to 1. Which item to reduce to 0; }Copy the code

4, flex – basis

This property defines the main size of the project before the extra space is allocated. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

5, flex

This property is defined as a shorthand for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

.item{ flex: flex-grow flex-shrink flex-basis; // Abbreviate}Copy the code

5, the align – self

This 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.

.item{
 	align-self: auto; 
 	align-self: flex-start;
 	align-self: flex-end;
 	align-self: center;
 	align-self: baseline;
 	align-self: stretch; 
}
Copy the code

Four. Code practice exercises

Making address: https://github.com/zjycpzjy/cssFlexbox.git

Flex layout interview questions

Talk a little bit about flex layout

Web applications with different device sizes and resolutions require responsive interface design to meet complex layout requirements. The advantage of the Flex elastic box model is that the developer simply declares the behavior of the layout, not the implementation, and the browser takes care of the actual layout.

When the layout involves scenarios of variable width, distribution alignment, the elastic box layout should be given priority.