Flex profile

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The following six properties are set on the parent level

- flex-direction - flex-wrap - flex-flow and line-feed abbreviations - justify- Content Horizontal - align-items Single row vertical - Align-content Aligns multiple vertical lines of contentCopy the code

1. Flex-direction Specifies the arrangement direction

flex-direction: row | row-reverse | column | column-reverse; What it means is that they are going in reverseCopy the code

2. Flex-wrap does not wrap

flex-wrap: nowrap | wrap | wrap-reverse; What it means: it's not a nowrapCopy the code

3. Flex-flow abbreviation: Direction + line break

flex-flow: row nowrap; Default: horizontal without line breaksCopy the code

4. Justify -content

justify-content: flex-start | flex-end | center | space-between | space-around; What it means: Flex-start (default) : left-align flex-end: right-align center: center space-between: align both ends with equal spacing 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

(1)

(2) (3)

(4) (5)

5. Align -items single row in vertical column

align-items: flex-start | flex-end | center | baseline | stretch; What it means: flex-start. Flex-end: bottom aligned. Center: vertically aligned. 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

6. Align -content Multi-line item content column

align-content: flex-start | flex-end | center | space-between | space-around | stretch; What it means: Flex-start: align with the starting point of the crossing 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

The following six properties are set at the child level

-order order of sublevels -flex-grow sublevel -flex-basis shrink sublevel -flex default 0 1 auto-align -self 2. grow: to grow; C. shrink D. shrink Basis: basic; Self: itself;Copy the code

1. orderThe: property defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

Order: <integer> / default is 0/ (1,2,3,4,5,6,7,8,9...) ;Copy the code

2.flex-growProperty defines the zoom scale of the project, default is0, that is, if there is spare space, do not enlarge.

Flex - turns: < number > / = > default/default to 0 without magnification (0,1,2,3, 0.5...). ;Copy the code

3.flex-shrinkProperty defines the scale to which the project will shrink, which defaults to 1, if there is not enough space.

flex-shrink: <number>; / defaults to 1/=> defaults to shrink (0,1,2,3, 0.5...) ;Copy the code

4.flex-basisProperty defines the main size that the project occupies before allocating excess space. 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.

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

5.flexAttributes areflex-grow.flex-shrink 和 flex-basisShort for, the default value is0 1 auto. The last two attributes are optional.

Flex: none | [< 'flex - turns' > < >' flex - the shrink '? | | < > 'flex - basis'] note: This property has two shortcut values: 'auto' (' 1 1 auto ') and None (' 0 0 auto '). It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.Copy the code

6.align-selfProperty to allow a single item to have a different alignment than other items and be overriddenalign-itemsProperties. The default value isautoIs inherited from the parent elementalign-itemsProperty, if there is no parent elementstretch.

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