How to understand the flex layout of html

This article focuses on "how to understand the flex layout of html". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the flex layout of html.

It is important to note that any container can be specified as a flex layout, but float, clear, and vertical-align will fail in a flex layout.

1. Spindle direction

The flex container is divided into x-axis and y-axis. The positive direction of the x-axis defaults from left to right, and the positive direction of the y-axis defaults from top to bottom.

Define a container as elastic layout display:flex; spindle default direction is left to right; if we want to change the default direction of flex, we need to use the flex-direction property flex-direction has four attribute values, namely row, row-reverse, column, column-reverse, respectively, from left to right, right to left, top to bottom, and bottom to top!

two。 Alignment of the spindle direction

(1) the principal axis of justify-content:flex-start is aligned to the left.

(2) the principal axis of justify-content:flex-end is aligned to the right.

(3) the principal axis of justify-content:center is centered.

(4) justify-content:space-between is equidistant between each sub-item, provided there is spare space.

(5) in justify-content:space-around, each child project will divide the remaining space equally, and there will be a distance between the child project and the boundary of the parent element.

3. Vertical single-line alignment

(1) align-item:flex-start vertically from top to bottom

(2) align-item:flex-end vertically from bottom to top

(3) align-item:center longitudinal center alignment

(4) align-item:baseline is aligned to baseline

(5) align-item:strech this is the default method

4. Sub-project line wrapping

(1) if the flex-wrap:wrap exceeds the parent element, it will wrap.

(2) reverse line wrapping of flex-wrap:wrap-reverse

(3) flex-wrap:no wrap. This is the default method and does not break lines.

5. Vertical multiline alignment

(1) alignment on align-content:flex-start

(2) alignment under align-content:flex-end

(3) align-content:center is centered up and down.

(4) align-content:space-between

(5) align-content:space-around

The above are all attributes added to the parent element

6. Some properties of the subproject

(1) order:0, which defines the sorting position of sub-items. The smaller the value, the higher the priority. The default is 0.

(2) flex-grow:0; defines the magnification of the subproject. Default is 0 and does not zoom in.

(3) flex-shrink:1; defines the reduction ratio of subprojects. The default is 1. If the space is insufficient, it will be scaled down proportionally, while 0 will not be reduced. Negative values will not be valid.

(4) flex-basis:1; defines that subprojects occupy space. The default is auto, which can be set as a percentage or a fixed value.

The above three attributes can be abbreviated, for example, the order of flex:1,1,1 is as above

At this point, I believe you have a deeper understanding of "how to understand the flex layout of html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!