CSS uses flex layouts

The flex layout is probably the most used in development these days, and it's a one-dimensional layout that's set updisplay: flex | inline-flex, you can think of the element as a container, and each item in the container is called a flex child. For flex, there isSpindlewithCross axesThe main axis is a horizontal line, and the intersection axis is perpendicular to the main axis and therefore vertical. where the spindle can be passedflex-directionproperty settings.

The properties of flex can be divided into two categories, one is that it acts on the wholecontainersThe other type is acting on the containerEvery childTarget. The main properties that act on the container are:

flex-direction controls the layout direction of the container, whether from left to right, right to left, or top to bottom

row: The default value, which arranges elements from left to right in the normal document flow directionrow-reverse: withrowIn the opposite directioncolumn: Displays elements in columns, similar to blockscolumn-reverse: The orientation is the opposite of column, and flex-wrap controls whether the child element is displayed on a single line or in a new line. Valid values:

no-wrap: Default value, no line breakwrap: Wrap displaywrap-reverse: Wrap and arrange elements from bottom to top flex-flowflex-directionwithflex-wrapAbbreviations, such as:flex-flow: row wrap

justify-content controls the alignment and arrangement of elements in the horizontal direction, and the main values are:

flex-start: As per the normal document flow, it appears to be left-alignedflex-end: Aligns as per normal document flow, as shown to be right-alignedcenter: Center alignment, which is most commonly used in the usual developmentspace-between: The ends are aligned, leaving no gap between the left and right sidesspace-around: Similar to the end alignment, but there is space on the left and right sides, and the space is half of the free part in the middlespace-evenly: The align-items control the alignment and arrangement of the elements in the vertical direction

stretch: The child is highly stretchedflex-start: Aligns to the top as per normal document flowflex-end: Aligns as per normal document flow, as a bottom-alignmentcenter: Center alignment, often used for vertical centeringbaseline: All child elements are aligned with respect to the baseline, which is the letterxThe lower edge of the align-content property is the samealign-itemsThe difference isMultiple lines, which controls how the children in each row are aligned and arranged vertically. The main values are as follows:

stretch: Default, each row is stretched in equal proportionsflex-start: Multiple elements are top-alignedflex-end: Multiple elements are bottom-alignedcenter: The whole is vertically centeredspace-between: The upper and lower rows are aligned at both ends, and the middle element is bisectedspace-around: Each row of elements has independent space above and below that does not overlapspace-evenly: The properties that apply to the flex child in each row of elements are divided equally up and down:

The order property is mainly used to change the child elementArrange the position, the value is an integer, the default value is 0, and the order is sorted from smallest to largest. For example, an order of -1 is higher than an order of 1.

order: 0order: -1

flex-grow: 1

flex-shrink: 0

flex is a propertyflex-growflex-shrinkwithflex-basisIt is generally recommended to use abbreviated attributes, which allow the browser to automatically calculate other values, rather than explicitly specifying each flex attribute. A few values of flex are listed below"Applications"section.

align-self controls the vertical alignment of a child individually, and its value is the same as that of thealign-itemsSame, except that one is for all items and one for individual items.

align-self: auto | flex-start | flex-end | center | baseline | stretch

flex: initial: Equivalent toflex: 0 1 autois the default value for the flex property. It means that there is space left and does not expand the element, but when there is not enough space, the element shrinks, and as for the element size, it adapts to the width of the content that it actually occupies. Suitable for two-column adaptive layouts with a fixed width on one side and automatic content on the otherflex: 0: Equivalent toflex: 0 1 0%, which is manifested as the element will not expand, but will shrink when there is not enough space, and the size is the minimum content width, and the effect is that the text is arranged vertically in a column and squeezed together. flex: none: Equivalent toflex: 0 0 auto, which is represented by the fact that the element neither shrinks nor expands, and the element size is the maximum content width. The effect of this setting is that elements will be displayed regardless of the width of the container, and will be displayed all the way to the end without wrapping, so the container may overflow. It is more suitable for some scenarios that lose flexibility, such as a list, the left side is the text**, the right side is a button, we hope that the text in this button does not wrap, and is not backlogged on the left, you can set the buttonflex: noneflex: 1: Equivalent toflex: 1 1 0%, which means that the element can be expanded or contracted, and the size of the element is the minimum content width, that is, when the width is insufficient, the text will be displayed in line wrapping. This applies to:Divide the layoutflex: auto: Equivalent toflex: 1 1 auto, which means that the element can be expanded or contracted, and when the content space is insufficient, the element will expand outward and occupy more space, that is, it will preempt the space of other children. Its application scenarios:Web navigation bar, because the navigation bar is often used with several children, but the amount of text in each child is not fixedflex:autoYou can automatically assign widths based on content.