Elastic box ( Reprinted from )
Providing maximum flexibility for boxed model. Any container can be designated as Flex layout
There are two main shaft
main axis
cross axis
Container Properties
- flex-direction: direction determination arrangement direction of the spindle, i.e., the default item level value (
row | row-reverse | column | column-reverse) - flex-wrap: no less than the effect of the discharge line feed value (
nowrap | wrap | wrap-reverse) - flex-flow: Abbreviation of the above two properties default (row nowrap)
- justify-content: Alignment Values project above the spindle ( )
start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline - align-item: Alignment Values intersecting axis (
flex-start | flex-end | center | baseline | stretch)
align-item:baseline; - Results are as follows
stretch: If the project height is not set or set to auto, occupies the entire height of the container.
- align-content: a plurality of values defined in the alignment axis (
flex-start | flex-end | center | space-between | space-around | stretch)
align-content: space-around; the following effects
item of property
- After the order against the greater the: order
- flex-grow: an enlarged scale down the remaining dispensing position according to the ratio
- flex-shrink: reduction ratio
- flex-basis: allocate more than the size of the position occupied when the previous position
- flex: flex properties are flex-grow, flex-shrink and flex-basis shorthand
- align-self：
允许单个项目与其他项目有不一样的对齐方式