flex-wrap
|
string
|
nowrap
|
No
|
Whether flex items in the container are displayed in a single row or multiple rows. Currently, dynamic modification is not supported. Available values are as follows:
- nowrap: Items are displayed on a single axis.
- wrap: Items are displayed on multiple axes.
|
justify-content
|
string
|
flex-start
|
No
|
How items are aligned along the main axis of the current row in the container. Available values are as follows:
- flex-start: Items are packed towards the start row.
- flex-end: Items are packed towards the end row.
- center: Items are centered along the row.
- space-between: Items are positioned with space between the rows.
- space-around: Items are positioned with space before, between, and after the rows.
|
align-items
|
string
|
flex-start
|
No
|
How items are aligned along the cross axis of the current row in the container. Available values are as follows:
- stretch: Items are stretched to the same height or width as the container in the cross axis direction.
- flex-start: Items are aligned to the start of the cross axis.
- flex-end: Items are aligned to the end of the cross axis.
- center: Items are aligned in the middle of the cross axis.
|
align-content
|
string
|
flex-start
|
No
|
Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:
- flex-start: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
- flex-end: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
- center: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.
- space-between: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
- space-around: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.
|
height
|
<length> | <percentage>
|
-
|
No
|
Component height.
If this length attribute is not set, the length required for the element content is used.
|
border
|
-
|
0
|
No
|
Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.
|
border-style
|
string
|
solid
|
No
|
Shorthand attribute to set the style for all borders. Available values are as follows:
- dotted: Dotted border. The radius of a dot is half of border-width.
- dashed: Dashed border
|
border-[left|top|right|bottom]-style
|
string
|
solid
|
No
|
Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.
|
border-[left|top|right|bottom]
|
-
|
-
|
No
|
Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.
|
border-width
|
<length>
|
0
|
No
|
Shorthand attribute to set the width of all borders, or separately set the width of each border.
|
border-[left|top|right|bottom]-width
|
<length>
|
0
|
No
|
Attribute to set widths of left, top, right, and bottom borders.
|
border-color
|
<color>
|
black
|
No
|
Shorthand attribute to set the color of all borders, or separately set the color of each border.
|
border-[left|top|right|bottom]-color
|
<color>
|
black
|
No
|
Attribute to set colors of left, top, right, and bottom borders.
|
border-radius
|
<length>
|
-
|
No
|
Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set border-width or border-color for all the borders at the same time.
|
border-[top|bottom]-[left|right]-radius
|
<length>
|
-
|
No
|
Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners
|
background
|
<linear-gradient>
|
-
|
No
|
This attribute supports Gradient Styles only but is not compatible with background-color or background-image.
|
background-color
|
<color>
|
-
|
No
|
Background color.
|
background-image
|
string
|
-
|
No
|
Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.
|
background-size
|
- string
- <length> <length>
- <percentage> <percentage>
|
auto
|
No
|
Background image size.
- The string values are as follows:
- contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
- cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
- auto: The original image width-height ratio is retained.
- The two <length> values are as follows:
Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.
- The two <percentage> values are as follows:
Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.
|
background-repeat
|
string
|
repeat
|
No
|
Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.
- repeat: Draws images along the x-axis and y-axis at the same time.
- repeat-x: Draws images along the x-axis.
- repeat-y: Draws images along the y-axis.
- no-repeat: The image is not drawn repeatedly.
|
background-position
|
- string string
- <length> <length>
- <percentage> <percentage>
|
0px 0px
|
No
|
- Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
- left: leftmost in the horizontal direction
- right: rightmost in the horizontal direction
- top: top in the vertical direction
- bottom: bottom in the vertical direction
- center: center position
- Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
- Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
- Using both <percentage> and <length>.
|
opacity
|
number
|
1
|
No
|
Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
|
display
|
string
|
flex
|
No
|
How and whether to display the box containing an element. Available values are as follows:
- flex: flexible layout
- none: The element is hidden.
|
visibility
|
string
|
visible
|
No
|
Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows:
- visible: The element is visible.
- hidden: The element is hidden but still takes up space.
NOTE: If both visibility and display are set, only display takes effect.
|