Any container can be specified as a Flex layout

display: flex;
/* Inline elements can also use Flex layout */
display: inline-flex;
/* WebKit-kernel browsers must be prefixed with -webkit */
display: -webkit-flex; /* Safari */
Copy the code

Properties of the parent container

Flex-direction (determines the direction of the spindle)

/* 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 on the right. Column: the main axis is vertical and the starting point is on the top
flex-direction: column-reverse | column | row | row-reverse;
Copy the code

Flex-wrap (line wrap)

flex-wrap: nowrap; /* Default: no line breaks */
Copy the code

flex-wrap: wrap; /* Newline, first line above */
Copy the code

flex-wrap: wrap-reverse; /* Newline, first line below */
Copy the code

flex-flow(direction + wrap)

/* Short form of the flex-direction and flex-wrap attributes, default is row nowrap */
flex-flow: <flex-direction> || <flex-wrap>;
Copy the code

Context-content (alignment on main axis)

Alignment on the main axis. The default main axis is horizontal

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

Align-items (alignment on cross axes)

Alignment on cross axes. Default cross axes are vertical axes

Flex-start: flex-end: flex-center: flex-center: baseline: stretch(default): If the item is not set to height or is set to Auto, it will fill the entire container height */
align-items: flex-start | flex-end | center | baseline | stretch;
Copy the code

Align-content (alignment of multiple axes)

Alignment of multiple axes – This property does not work if there is only one axis inside

/* flex-start: align with the start of the cross axis; flex-end: align with the end of the cross axis; space-between: align with the end of the cross axis; space-around: align with the end of the cross axis; Both sides of each axis are equally spaced. As a result, the space between axes is twice as long as the space between axes and the border (default): the axis takes up the entire cross axis */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Copy the code

Attributes of the child container

Order (order)

Define the order in which containers are arranged. The smaller the value is, the more advanced it is. The default value is 0

order: <integer>;
Copy the code

Flex-grow (Number of shares of remaining space)

Defines the number of shares of the remaining container space. Default is 0

flex-grow: <number>;
Copy the code

Flex-shrink (shrink the amount of space occupied)

Defines the number of shares of container compression space. Default is 1

  flex-shrink: <number>;
Copy the code

Flex-basis (occupies fixed space)

/* It can be set to the same value as the width or height property (such as 350px), and the container will occupy fixed space (it does not participate in the allocation of remaining space and compressed space) */
flex-basis: <length> | auto; /* default auto */
Copy the code

flex(grow + shrink + basis)

/* Short for flex-grow, flex-shrink, and flex-basis. The default value is 0. The last two attributes are optional */
flex: none | <flex-grow> <flex-shrink>? <flex-basis>?
Copy the code

Align-self (alignment on cross axes)

The align-items attribute defaults to auto, which inherits the align-items attribute of the parent element. If there is no parent element, it is the same as stretch */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Copy the code

source

Ruan Yifeng: Flex layout tutorial

Flex layout