What are the properties of flex?

The attributes of flex are: 1. flex-direction, set the direction of the main axis; 2. justify-content, set the arrangement of sub-elements on the main axis; 3. flex-wrap, set whether the sub-elements wrap; 4. , align-content, set the arrangement of all sub-elements on the side axis; 5. align-items: set the arrangement of the sub-elements on the side axis, etc.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

Attributes of flex:

1.flex-direction

Set the direction of the main axis

Attribute value description

row default value from left to right

row-reverse from left to right

column from top to bottom

column-reverse from top to bottom

2. justify-content

Set the arrangement of child elements on the main axis

The justify-content attribute defines the alignment of items on the main axis

Note: Before using this attribute, be sure to confirm which main axis is

Attribute value description

flex-start default value, starting from the head (if the main axis is the X axis, then from the left to the right)

flex-end Arrange from the tail

center Align in the center of the main axis (if the main axis is the X axis, center horizontally)

space-around Divide the remaining space equally

space-between Welt both sides first, and then divide the remaining space equally (important)

3. flex-wrap

Set whether the sub-element is wrapped

By default, items are arranged on a line (also called an "axis"). flex-wrap attribute definition, the default in flex layout is no line wrapping

Attribute value description

nowrap default value, no line wrapping

wrap line wrapping

4. align-content

Set the arrangement of sub-elements on the side axis (multiple lines)

Attribute value description

flex-start default value, Start arranging at the head of the cross axis

flex-end Start arranging at the tail of the cross axis

center Display in the middle of the cross axis

space-around Children on the side The axis bisects the remaining space

space-between. The children are first distributed on both ends on the side axis, and then divide the remaining space equally

stretch Sets the height of the child element to bisect the height of the parent element align-items: Sets the side axis Arrangement of child elements on the side axis (single row)

5, align-items

Set the arrangement of child elements on the side axis (single row)
Property value description

flex-start Default value, from top to bottom

flex-end From bottom to top

center squeeze together and center (vertical center)

stretch stretch

6, flex-flow
Composite properties of flex-direction and flex-wrap properties

Property value description

flex: The proportion of sub-items

align-self: Controls the arrangement of sub-items on its own side axis

order: The attribute defines the order of sub-items (front and back) order)

The above is the detailed content of What are the properties of flex?. For more information, please follow other related articles on the PHP Chinese website!