1. Related properties of flex layout container side
- flex-direction direction
| flex-direction | illustrate | Effect | Defaults |
|---|---|---|---|
| row | Horizontal orientation (left => right) |  |
yes |
| row-reverse | Horizontal orientation (right => left) |  |
|
| column | vertical direction (up => down) |  |
|
| column-reverse | Vertical direction (down => up) |  |
- flex-wrap line break
| flex-wrap | illustrate | Effect | Defaults |
|---|---|---|---|
| nowrap | no line break |  |
yes |
| wrap | Newline (on) |  |
|
| wrap-reverse | Newline (below) |  |
- flex-flow is shorthand for flex-direction and flex-wrap
flex-flow: row nowarp;
- justify-content horizontal alignment
| justify-content | illustrate | Effect | Defaults |
|---|---|---|---|
| flex-start | align left |  |
yes |
| flex-end | right align |  |
|
| center | center alignment |  |
|
| space-between | justify |  |
|
| space-around | interval |  |
- align-items vertical alignment
| align-items | illustrate | Effect | Defaults |
|---|---|---|---|
| flex-start | top alignment |  |
|
| flex-end | Bottom alignment |  |
|
| center | center alignment |  |
|
| stretch | full height |  |
yes |
| baseline | baseline |  |
- align-content The alignment of multiple axes. This property has no effect if the item has only one axis.
| align-content | illustrate | Effect | Defaults |
|---|---|---|---|
| flex-start | start alignment |  |
|
| flex-end | end alignment |  |
|
| center | center alignment |  |
|
| stretch | full alignment |  |
yes |
| space-between | justify |  |
|
| space-around | spaced alignment | |
Two, child element attributes
-
order Sort order. The smaller the value, the higher the arrangement, the default is 0
-
flex-grow enlargement ratio, the default is 0, that is, if there is remaining space, it will not be enlarged.
-
flex-shrink reduction ratio, the default is 1, that is, if there is insufficient space, the item will shrink.
-
flex-basis The amount of space an item occupies in the main axis before allocating excess space
-
flex is shorthand for flex-grow, flex-shrink and flex-basis, the default value is 0 1 auto. The last two attributes are optional.
-
align-self allows a single item to have a different alignment than other items, which can override the align-items property. The default value is auto