column-reverse
: The spindle is in the vertical direction and the starting point is in the lower edge.
3.2 Flex-wrap PropertiesBy default, items are lined up in a line (also known as the "axis"). flex-wrap
property Definition, how to wrap a line if one of the axes does not fit.
. box{ Flex-wrap:nowrap | wrap | wrap-reverse;}
It may take three values.
(1) nowrap
(default): No Line break.
(2) wrap
: line break, the first line is above.
(3) wrap-reverse
: line break, the first line is below.
3.3 Flex-flowflex-flow
Properties are flex-direction
flex-wrap
shorthand for properties and properties, and the default value is row nowrap
.
. box { flex-flow: <flex-direction> | | <flex-wrap>;}
3.4 Justify-content Propertiesjustify-content
property defines how the item is aligned on the spindle.
. box { Justify-content:flex-start | flex-end | center | space-between | Space-around;}
It may take 5 values, and the exact alignment is related to the direction of the axis. The following assumes that the spindle is from left to right.
flex-start
(default): Align Left
flex-end
: Align Right
center
: Center
space-between
: Justified, the interval between items is equal.
space-around
: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.
3.5 Align-items Propertiesalign-items
property defines how the item is aligned on the intersection axis.
. box { Align-items:flex-start | flex-end | center | baseline | stretch;}
It may take 5 values. The specific alignment is related to the direction of the cross axis, which assumes that the intersection axis is from top to bottom.
flex-start
: The starting point of the intersection axis is aligned.
flex-end
: The end alignment of the intersection axis.
center
: The midpoint of the intersection axis is aligned.
baseline
: The baseline alignment of the first line of text for the item.
stretch
(default): If the item is not set to height or set to auto, the height of the entire container will be filled.
3.6 Align-content Propertiesalign-content
Properties define the alignment of multiple axes. If the item has only one axis, this property does not work.
. box { Align-content:flex-start | flex-end | center | space-between | space-around | stretch;}
This property may take 6 values.
flex-start
: Aligns with the start point of the intersection axis.
flex-end
: Aligns with the end point of the intersection axis.
center
: Aligns with the midpoint of the intersection axis.
space-between
: aligned with the intersection axis, evenly spaced between axes.
space-around
: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.
stretch
(default): The axis fills the entire cross axis.
Iv. Properties of the projectThe following 6 properties are set on a project.
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 Order Propertyorder
property defines the order in which items are arranged. The smaller the number, the higher the alignment, and the default is 0.
. Item { order: <integer>;}
4.2 Flex-grow Propertiesflex-grow
property defines the magnification of the item, by default, that is 0
, if there is space left, do not zoom in.
. Item { Flex-grow: <number>;/* Default 0 */}
If all items have flex-grow
properties of 1, they will divide the remaining space (if any). If an item has a flex-grow
property of 2 and the other item is 1, the former occupies more than the remaining space.
4.3 Flex-shrink propertiesflex-shrink
Property defines the scale-out for the project, which defaults to 1, that is, if there is not enough space, the item shrinks.
. Item { Flex-shrink: <number>;/* Default 1 */}
If all items have a flex-shrink
property of 1, they will be scaled down when there is not enough space. If an item has a flex-shrink
property of 0 and the other items are 1, the former does not shrink when there is not enough space.
A negative value is not valid for this property.
4.4 Flex-basis Propertiesflex-basis
property defines the spindle space (main size) that the item occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is the auto
original size of the project.
. Item { flex-basis: <length> | auto;/* Default auto */}
It can be set to width
height
the same value as a property (such as 350px), then the item will occupy a fixed space.
4.5 Flex Propertiesflex
The property is flex-grow
, flex-shrink
and shorthand for, flex-basis
the default value 0 1 auto
. The latter two properties are optional.
. item { Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]}
This property has two shortcut values: auto
( 1 1 auto
) and None ( 0 0 auto
).
It is recommended that you use this property instead of writing three separate properties separately, because the browser calculates the relevant values.
4.6 Align-self Propertiesalign-self
property allows a single item to have a different alignment than other items, overriding the align-items
property. The default value auto
, which represents the property that inherits the parent element align-items
, is equivalent to if there is no parent element stretch
.
. item { Align-self:auto | flex-start | flex-end | center | baseline | stretch;}