Here is a concise front-end knowledge system waiting for you to check, have a look, there will be a surprise oh, if you feel good, begged star ha ~


Course mind mapping

Flex Elastic box layout

CSS3 elastic box layout understanding:

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.

Container properties

Direction of principal axis

flex-direction: row | row-reverse | column | column-reverse; Row (default) : The main axis is horizontal and the starting point is on the left. Row-reverse: The main axis is horizontal and the starting point is at the right end. Column: The main axis is in the vertical direction, and the starting point is in the upper edge. Column-reverse: the main axis is vertical and the starting point is at the bottom.Copy the code

Newline properties

flex-wrap: nowrap | wrap | wrap-reverse; Nowrap (default) : no line breaks. Wrap: The first line is at the top. Wrap-reverse: newline with the first line at the bottom.Copy the code

Short: Direction + line feed

flex-flow: <flex-direction> || <flex-wrap>;
Copy the code

Spindle alignment

justify-content: flex-start | flex-end | center | space-between | space-around; Flex-start (default) : left-align Flex-end: right-align center: center space-between: align both ends with equal intervals between items. Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.Copy the code

Cross axis alignment

align-items: flex-start | flex-end | center | baseline | stretch; Flex-start: Alignment of the starting point of the cross axes. Flex-end: alignment of ends of crossed axes. Center: Alignment of the midpoint of the cross axis. Baseline: The baseline alignment of the first line of text of the project. Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.Copy the code

Alignment of multiple axes

align-content: flex-start | flex-end | center | space-between | space-around | stretch; Flex-start: align with the starting point of the cross axis. Flex-end: aligns with the end of the cross axis. Center: aligns with the midpoint of the intersecting axis. Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes. 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. Stretch (default) : Axis takes up the entire cross axis.Copy the code

Project attributes

The lower the value, the higher the order. The default value is 0.

order: <integer>;
Copy the code

The default magnification ratio of the project is 0, that is, if there is free space, the project will not be enlarged.

flex-grow: <number>; /* default 0 */
Copy the code

The scale of the project is 1 by default, that is, if the space is insufficient, the project will shrink.

flex-shrink: <number>; /* default 1 */
Copy the code

The space occupied by the project. The default value is Auto, which is the original size of the project

flex-basis: <length> | auto; /* default auto */
Copy the code

Abbreviations: flex-grow, flex-shrink and flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Copy the code

Independent alignment

align-self: auto | flex-start | flex-end | center | baseline | stretch;
Copy the code

Flex project attribute

shorthand Complete the form
The default value flex : 0 1 auto;
flex : 1 flex : 1 1 0%;
flex: auto flex : 1 1 auto;
flex : none flex: 0 0 auto;
flex : 0% flex : 1 1 0%;
flex : 2 3 flex : 2 3 0%;
flex : 2 3px flex : 2 1 3px;

Note: Flex :1 differs from Flex :auto, essentially flex-basis.

Flexbox needs to calculate the size of the remaining space when allocating it, which relies on Flex-basis.

When flex:1, flex-basis is 0%, meaning that the element does not apply even if width is set. The base width is 0, and the final width of the element is the size that the remaining width is allocated.

Flex :auto, flex-basis is auto, the base width is set to the element width, the final width is equal to the base width plus the remaining width allocated.