The animation will wait zero seconds, and thus start right away.

You can use decimal values in seconds with the keyword s.

You can use milliseconds instead of seconds, with the keyword ms.

You can use negative values: the animation will start as if it had already been playing for 500ms.

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.

The animation is played forwards first, then backwards:

• starts at the first keyframe
• stops at the last keyframe
• starts again, but at the last keyframe
• stops at the first keyframe

The animation is played backwards first, then forwards:

• starts at the last keyframe
• stops at the first keyframe
• starts again, but at the first keyframe
• stops at the last keyframe

The default value is zero seconds: the animation will simply not play.

You can use decimal values in seconds with the keyword s.

You can use milliseconds instead of seconds, with the keyword ms.

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

The last styles applied at the end of the animation are retained afterwards.

The animation's styles will already be applied before the animation actually starts.

The styles are applied before and after the animation plays.

The animation will only play once.

You can use integer values to define a specific amount of times the animation will play.

By using the keyword infinite, the animation will play indefinitely.

If no animation name is specified, no animation is played.

If a name is specified, the keyframes matching that name will be used.

For example, the fadeIn animation looks like this:

@keyframes fadeIn {
+
#animation-delay
Defines how long the animation has to wait before starting. The animation will only be delayed on its first iteration.
默认属性 animation-delay: 0s;
The animation will wait zero seconds, and thus start right away.
animation-delay: 1.2s;
You can use decimal values in seconds with the keyword s.
animation-delay: 2400ms;
You can use milliseconds instead of seconds, with the keyword ms.
animation-delay: -500ms;
You can use negative values: the animation will start as if it had already been playing for 500ms.
#animation-direction
Defines in which direction the animation is played.
默认属性 animation-direction: normal;
The animation is played forwards. When it reaches the end, it starts over at the first keyframe.
animation-direction: reverse;
The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.
animation-direction: alternate;
The animation is played forwards first, then backwards:
starts at the first keyframe
stops at the last keyframe
starts again, but at the last keyframe
stops at the first keyframe
animation-direction: alternate-reverse;
The animation is played backwards first, then forwards:
starts at the last keyframe
stops at the first keyframe
starts again, but at the first keyframe
stops at the last keyframe
#animation-duration
Defines how long the animation lasts.
默认属性 animation-duration: 0s;
The default value is zero seconds: the animation will simply not play.
animation-duration: 1.2s;
You can use decimal values in seconds with the keyword s.
animation-duration: 2400ms;
You can use milliseconds instead of seconds, with the keyword ms.
#animation-fill-mode
Defines what happens before an animation starts and after it ends. The fill mode allows to tell the browser if the animation’s styles should also be applied outside of the animation.
默认属性 animation-fill-mode: none;
The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.
animation-fill-mode: forwards;
The last styles applied at the end of the animation are retained afterwards.
animation-fill-mode: backwards;
The animation's styles will already be applied before the animation actually starts.
animation-fill-mode: both;
The styles are applied before and after the animation plays.
#animation-iteration-count
Defines how many times the animation is played.
默认属性 animation-iteration-count: 1;
The animation will only play once.
animation-iteration-count: 2;
You can use integer values to define a specific amount of times the animation will play.
animation-iteration-count: infinite;
By using the keyword infinite, the animation will play indefinitely.
#animation-name
Defines which animation keyframes to use.
默认属性 animation-name: none;
If no animation name is specified, no animation is played.
animation-name: fadeIn;
If a name is specified, the keyframes matching that name will be used.
For example, the fadeIn animation looks like this:
@keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-}
animation-name: moveRight;
Another example: the moveRight animation:
@keyframes moveRight {
+}
animation-name: moveRight;
Another example: the moveRight animation:
@keyframes moveRight {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(100px);
   }
-}
#animation-play-state
Defines if an animation is playing or not.
default animation-play-state: running;
If the animation-duration and animation-name are defined, the animation will start playing automatically.
animation-play-state: paused;
The animation is set paused at the first keyframe.
This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.
In this example, the square is visible by default, but the on the first keyframe of fadeAndMove, the opacity is set to 0. When paused, the animation will be "stuck" on this first keyframe, and will thus be invisible.
@keyframes fadeAndMove {
+}
#animation-play-state
Defines if an animation is playing or not.
默认属性 animation-play-state: running;
If the animation-duration and animation-name are defined, the animation will start playing automatically.
animation-play-state: paused;
The animation is set paused at the first keyframe.
This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.
In this example, the square is visible by default, but the on the first keyframe of fadeAndMove, the opacity is set to 0. When paused, the animation will be "stuck" on this first keyframe, and will thus be invisible.
@keyframes fadeAndMove {
   from {
     opacity: 0;
     transform: translateX(0);
@@ -21,4 +21,4 @@
     opacity: 0;
     transform: translateX(100px);
   }
-}
#animation-timing-function
Defines how the values between the start and the end of the animation are calculated.
default animation-timing-function: ease;
The animation starts slowly, accelerates in the middle, and slows down at the end.
animation-timing-function: ease-in;
The animation starts slowly, and accelerates gradually until the end.
animation-timing-function: ease-out;
The animation starts quickly, and decelerates gradually until the end.
animation-timing-function: ease-in-out;
Like ease, but more pronounced.
The animation starts quickly, and decelerates gradually until the end.
animation-timing-function: linear;
The animation has a *constant speed.
animation-timing-function: step-start;
The animation jumps instantly to the final state.
animation-timing-function: step-end;
The animation stays at the initial state until the end, when it instantly jumps to the final state.
animation-timing-function: steps(4, end);
By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.
#animation
Shorthand property for animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode and animation-play-state.
Only animation-duration and animation-name are required.
\ No newline at end of file
+}

The animation starts slowly, accelerates in the middle, and slows down at the end.

The animation starts slowly, and accelerates gradually until the end.

The animation starts quickly, and decelerates gradually until the end.

Like ease, but more pronounced.

The animation starts quickly, and decelerates gradually until the end.

The animation has a *constant speed.

The animation jumps instantly to the final state.

The animation stays at the initial state until the end, when it instantly jumps to the final state.

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

The background extends completely throughout the element, even under the border.

The background only extends to the edge of the border: it includes the padding but not the border.

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

By default, the background color is transparent, basically meaning that there is no background color.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

Removes any background image.

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at the edges.

You can specify the shape of the radial gradient: circle or ellipse (default).

You can specify color stops using percentage values.

You can specify where the gradient should end:

• closest-side
• closest-corner
• farthest-side
• farthest-corner

Like with the background-position, you can specify the position of the gradient.

The background image starts at the edge of the border: within padding but not the border.

The background image starts under the border.

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

You can use a combination of position keywords: center, top, bottom, left and right.

The background image will be positioned in the center of the element.

The background image will repeat itself both horizontally and vertically.

The background image will only repeat itself horizontally.

The background image will only repeat itself vertically.

The background image will only appear once.

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

You can specify a size in pixels:

• the first value is the horizontal size
• the second is the vertical size

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

The keyword contain will resize the background image to make sure it remains fully visible.

The keyword cover will resize the background image to make sure the element is fully covered.

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

The background extends completely throughout the element, even under the border.

The background only extends to the edge of the border: it includes the padding but not the border.

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

By default, the background color is transparent, basically meaning that there is no background color.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

Removes any background image.

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.parryqiu.com/images/jt.png).

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at the edges.

You can specify the shape of the radial gradient: circle or ellipse (default).

You can specify color stops using percentage values.

You can specify where the gradient should end:

• closest-side
• closest-corner
• farthest-side
• farthest-corner

Like with the background-position, you can specify the position of the gradient.

The background image starts at the edge of the border: within padding but not the border.

The background image starts under the border.

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

You can use a combination of position keywords: center, top, bottom, left and right.

The background image will be positioned in the center of the element.

The background image will repeat itself both horizontally and vertically.

The background image will only repeat itself horizontally.

The background image will only repeat itself vertically.

The background image will only appear once.

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

You can specify a size in pixels:

• the first value is the horizontal size
• the second is the vertical size

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

The keyword contain will resize the background image to make sure it remains fully visible.

The keyword cover will resize the background image to make sure the element is fully covered.

Removes the bottom border.

You can use pixel values.

Removes the left border.

You can use pixel values.

Removes the right border.

You can use pixel values.

Removes the top border.

You can use pixel values.

Defines the width of all borders to 1px.

Defines the top and bottom borders to 2px, the left and right to 0.

The width and height of the element only apply to the content of the element.

For example, this element has

• border-width: 12px
• padding: 30px
• width: 200px

The full width is 24px + 60px + 200px = 284px.

The content has the defined width. The box accomodates for those dimensions.

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

For example, this element has

• border-width: 12px
• padding: 30px
• width: 200px

The full width is 200px, no matter what.

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 60px - 24px = 116px.

The element will automatically adjust its height to allow its content to be displayed correctly.

You can use numeric values like pixels, (r)em, percentages...

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

Reverts to the default value of the browser.

You can use unitless values: the line height will be relative to the font size.

You can use pixel values.

You can use em values: like with unitless values, the line height will be relative to the font size.

Removes any margin at the bottom.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

Removes any margin on the left.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

The auto keyword will give the left side a share of the remaining space.

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

Removes any margin on the right.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

The auto keyword will give the right side a share of the remaining space.

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

Removes any margin at the top.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

The element has no limit in terms of height.

You can use numeric values like pixels, (r)em, percentages...

If the maximum height is larger than the element's actual height, the max height has no effect.

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

The element has no limit in terms of width.

You can use numeric values like pixels, (r)em, percentages...

If the maximum width is larger than the element's actual width, the max width has no effect.

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

The element has no minimum height.

You can use numeric values like pixels, (r)em, percentages...

If the minimum height is larger than the element's actual height, the min height will be applied.

If the minimum height is smaller than the element's actual height, the min height has no effect.

The element has no minimum width.

You can use numeric values like pixels, (r)em, percentages...

If the minimum width is larger than the element's actual width, the min width will be applied.

If the minimum width is smaller than the element's actual width, the min width has no effect.

Removes any padding on the bottom.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

Removes any padding on the left.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

Removes any padding on the right.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

Removes any padding on the top.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

The element will automatically adjust its width to allow its content to be displayed correctly.

You can use numeric values like pixels, (r)em, percentages...

If you use percentages, the value is relative to the container's width.

Removes the bottom border.

You can use pixel values.

Removes the left border.

You can use pixel values.

Removes the right border.

You can use pixel values.

Removes the top border.

You can use pixel values.

Defines the width of all borders to 1px.

Defines the top and bottom borders to 2px, the left and right to 0.

The width and height of the element only apply to the content of the element.

For example, this element has

• border-width: 12px
• padding: 30px
• width: 200px

The full width is 24px + 60px + 200px = 284px.

The content has the defined width. The box accomodates for those dimensions.

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

For example, this element has

• border-width: 12px
• padding: 30px
• width: 200px

The full width is 200px, no matter what.

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 60px - 24px = 116px.

The element will automatically adjust its height to allow its content to be displayed correctly.

You can use numeric values like pixels, (r)em, percentages...

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

Reverts to the default value of the browser.

You can use unitless values: the line height will be relative to the font size.

You can use pixel values.

You can use em values: like with unitless values, the line height will be relative to the font size.

Removes any margin at the bottom.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

Removes any margin on the left.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

The auto keyword will give the left side a share of the remaining space.

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

Removes any margin on the right.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

The auto keyword will give the right side a share of the remaining space.

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

Removes any margin at the top.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the container.

The element has no limit in terms of height.

You can use numeric values like pixels, (r)em, percentages...

If the maximum height is larger than the element's actual height, the max height has no effect.

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

The element has no limit in terms of width.

You can use numeric values like pixels, (r)em, percentages...

If the maximum width is larger than the element's actual width, the max width has no effect.

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

The element has no minimum height.

You can use numeric values like pixels, (r)em, percentages...

If the minimum height is larger than the element's actual height, the min height will be applied.

If the minimum height is smaller than the element's actual height, the min height has no effect.

The element has no minimum width.

You can use numeric values like pixels, (r)em, percentages...

If the minimum width is larger than the element's actual width, the min width will be applied.

If the minimum width is smaller than the element's actual width, the min width has no effect.

Removes any padding on the bottom.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

Removes any padding on the left.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

Removes any padding on the right.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

Removes any padding on the top.

You can use pixel values.

You can use (r)em values.

The value is relative to the font size:

• em: relative to the element's current font size
• rem: relative to <html> the root element's font size

You can use percentage values.
The percentage is based on the width of the element.

The element will automatically adjust its width to allow its content to be displayed correctly.

You can use numeric values like pixels, (r)em, percentages...

If you use percentages, the value is relative to the container's width.

Each line will stretch to fill the remaining space.

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

• The first line is 100px high
• The second line is 50px high
• The remaing space is 150px

This remaining space is distributed equally amongst the two lines:

• The first line is now 175px high
• The second line is now 125px high

Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.

Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.

Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.

Each line will only fill the space it needs. The remaining space will appear between the lines.

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

The flexbox items are aligned at the start of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

The flexbox items are aligned at the end of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the bottom.

The flexbox items are aligned at the center of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

The flexbox items are aligned at the baseline of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

The flexbox items will stretch across the whole cross axis.

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

The target will use the value of align-items.

If the container has align-items: center and the target has align-self: flex-start, only the target will be at the start of the cross axis.

By default, this means it will be aligned vertically at the top.

If the container has align-items: center and the target has align-self: flex-end, only the target will be at the end of the cross axis.

By default, this means it will be aligned vertically at the bottom.

If the container has align-items: flex-start and the target has align-self: center, only the target will be at the center of the cross axis.

By default, this means it will be vertically centered.

If the container has align-items: center and the target has align-self: baseline, only the target will be at the baseline of the cross axis.

By default, this means it will be aligned along the basline of the text.

If the container has align-items: center and the target has align-self: stretch, only the target will stretch along the whole cross axis.

The element will be automatically sized based on its content, or on any height or width value if they are defined.

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

The flexbox items are ordered the same way as the text direction, along the main axis.

The flexbox items are ordered the opposite way as the text direction, along the main axis.

The flexbox items are ordered the same way as the text direction, along the cross axis.

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

The element will not grow if there's space available. It will only use the space it needs.

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the remaining space is divided in 3:

• 1 third goes to the green item
• 2 thirds go to the pink item
• Nothing goes to the yellow item, who retains its initial width

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

• 3 quarters are taken from the red item
• 1 quarter is taken from the yellow item

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

The flexbox items will be distributed among multiple lines if needed.

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

The flexbox items are pushed towards the start of the container's main axis.

The flexbox items are pushed towards the end of the container's main axis.

The flexbox items are centered along the container's main axis.

The remaining space is distributed between the flexbox items.

The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.

The order of the flexbox items is the one defined in the HTML code.

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

You can use negative values.

You can set a different value for each flexbox item.

每一行拉伸平分并填充剩余空间

此示例中，容器高为 300px。 所有的方块高 50px，除了第二个的高度为 100px。

+
• 第一行高 100px
+
• 第二行高 50px
+
• 容器剩余高度 150px
+

剩余空间被两行平分:

+
• 第一行的高度变成了 175px
+
• 第二行变成了 125px
+

每一行仅仅占用实际所需的空间。所有的元素都将靠纵向轴起始处对齐。

每一行仅仅占用实际所需的空间。所有的元素都将靠纵向轴末尾处对齐。

每一行仅仅占用实际所需的空间。所有的元素都将靠纵向轴中间对齐。

每一行仅仅占用实际所需的空间。剩余空间占据行之间。

每一行仅仅占用实际所需的空间。剩余空间平均分配给行元素之间（上下）。

flexbox 的子元素按照纵向轴的起始处对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于垂直方向的顶部。

flexbox 的子元素按照纵向轴的末尾处对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于垂直方向的底部。

flexbox 的子元素按照纵向轴的中间对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于垂直方向的中间。

flexbox 的子元素按照纵向轴的 baseline 对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于以自身文字为横向水平线的baseline。

flexbox 的子元素将拉伸覆盖整个纵向轴。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素将填满整个纵向的空间。

元素使用 align-items 的值。

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: flex-start，那么仅仅目标元素对齐于纵向轴的起始处。

默认，这就意味着元素对齐于垂直方向的顶部。

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: flex-end，那么仅仅目标元素对齐于纵向轴的末尾处。

默认，这就意味着元素对齐于垂直方向的底部。

如果容器有属性 align-items: flex-start 且 目标元素 有属性 align-self: center，那么仅仅目标元素对齐于纵向轴的中间。

默认，这就意味着元素对齐于垂直方向的中间。

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: baseline，那么仅仅目标元素对齐于纵向轴的 baseline。

默认，这就意味着元素沿着文字的 baseline 对齐。

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: stretch，那么仅仅目标元素拉伸填充于整个纵向轴。

元素根据自身的内容自动调整大小，或者根据已定义的 高度 或 宽度 调整大小。

你可以定义 pixel 或 (r)em 值。元素将换行其内容避开任何的元素溢出。

元素按照与文字方向（书写模式）相同的方向，沿着主（横）轴。

元素按照与文字方向（书写模式）相反的方向，沿着主（横）轴。

元素按照与文字方向（书写模式）相同的方向，沿着纵向轴。

元素按照与文字方向（书写模式）相反的方向，沿着纵向轴。

元素 不 不占用剩余空间。它仅仅占用自身所需空间。

元素将 占用 扩展因子 1。如果没有其他元素也设置了 flex-grow 的话，它将占用剩下的所有空间。

因为 flex-grow 的值是相对的，它的具体表现还取决于此元素的同级元素。

在这个例子中，剩余空间被分隔成了 3 个扩展因子：

• 三分之一分配给了绿色 元素
• 三分之二分配给了粉色元素
• 没有其他空间分配给黄色元素，它保留了自身原本占用的大小。

当主轴（横向轴）没有足够空间的时候，元素将按照扩展因子 1 来进行压缩，也将导致换行（折叠）其自身的内容。

元素不压缩：占用它所需要的宽且不换行（折叠）自身的内容。同级元素将压缩给出目标元素足够的控件。

因为目标元素不换行（折叠）自身的内容，所以可能会导致 flexbox 容器的内容产生元素移除。

因为 flex-shrink 的值是相对的，它的具体表现还取决于此元素的同级元素。

在此例子中，绿色的元素占用了 100% 的宽度。此部分的空间将从它的两个同级元素中占用，并且占用被分成了 4份：

• 四分之三从红色元素中获取（红色压缩四分之三）
• 四分之一从黄色元素中获取（黄色压缩四分之一）

元素将始终保持单行，最终，如果需要将会进行元素溢出。

元素将根据实际情况分布在多行。

元素将根据实际情况分布在多行。任何新增的行都将会被添加在之前的一行之前。

元素朝着主轴（横向轴）的开始方向排列。

元素朝着主轴（横向轴）的末尾方向排列。

元素朝着主轴（横向轴）的中间排列。

剩余的空间平均分布在元素之间。

剩余的空间平均分布在元素的开始和结束处：在第一个元素的前面和最后一个元素的后面也分配空间。

元素的排序按照其 HTML 代码中的排序。

元素的排序与其同级元素具有相关性。最终的排序将会考虑到所有元素的排序值。

值你可以使用负数。

你可以为每一个元素设置不同的值。

The element will remain in its natural position.

If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

The element will remain in its natural position.

If the element is in position relative, the element will move left by the amount defined by the left value.

If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

The element will remain in the natural flow of the page.

As a result, it will not act as anchor point for the absolutely positioned pink block.

Also, it will not react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will remain in the natural flow of the page.

It also makes the element positioned: it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will not remain in the natural flow of the page. It will position itself according to the viewport.

Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will remain in its natural position.

If the element is in position relative, the element will move right by the amount defined by the right value.

If the element is in position absolute, the element will position itself from the right of the first positioned ancestor.

The element will remain in its natural position.

If the element is in position relative, the element will move downwards by the amount defined by the top value.

If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.

The order is defined by the order in the HTML code:

• first in the code = behind
• last in the code = in front

The z-index value is relative to the other ones. The target element is move in front of its siblings.

You can use negative values. The target element is move in behind its siblings.

The element will remain in its natural position.

If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

The element will remain in its natural position.

If the element is in position relative, the element will move left by the amount defined by the left value.

If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

The element will remain in the natural flow of the page.

As a result, it will not act as anchor point for the absolutely positioned pink block.

Also, it will not react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will remain in the natural flow of the page.

It also makes the element positioned: it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will not remain in the natural flow of the page. It will position itself according to the viewport.

Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

Also, it will react to the following properties:

• top
• bottom
• left
• right
• z-index

The element will remain in its natural position.

If the element is in position relative, the element will move right by the amount defined by the right value.

If the element is in position absolute, the element will position itself from the right of the first positioned ancestor.

The element will remain in its natural position.

If the element is in position relative, the element will move downwards by the amount defined by the top value.

If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.

The order is defined by the order in the HTML code:

• first in the code = behind
• last in the code = in front

The z-index value is relative to the other ones. The target element is move in front of its siblings.

You can use negative values. The target element is move in behind its siblings.

The transition will wait zero seconds, and thus start right away.

You can use decimal values in seconds with the keyword s.

You can use milliseconds instead of seconds, with the keyword ms.

You can use negative values: the transition will start as if it had already been playing for 500ms.

The transition will last zero seconds, and is thus instant.

You can use decimal values in seconds with the keyword s.

You can use milliseconds instead of seconds, with the keyword ms.

The element will transition all properties:

• background
• color
• transform

The element will transition no property: the transition is thus instant.

The element will only transtion the background property.

The element will only transtion the color property.

The element will only transtion the transform property.

The transition starts slowly, accelerates in the middle, and slows down at the end.

The transition starts slowly, and accelerates gradually until the end.

The transition starts quickly, and decelerates gradually until the end.

Like ease, but more pronounced.

The transition starts quickly, and decelerates gradually until the end.

The transition has a *constant speed.

The transition jumps instantly to the final state.

The transition stays at the initial state until the end, when it instantly jumps to the final state.

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

The transition will wait zero seconds, and thus start right away.

You can use decimal values in seconds with the keyword s.

You can use milliseconds instead of seconds, with the keyword ms.

You can use negative values: the transition will start as if it had already been playing for 500ms.

The transition will last zero seconds, and is thus instant.

You can use decimal values in seconds with the keyword s.

You can use milliseconds instead of seconds, with the keyword ms.

The element will transition all properties:

• background
• color
• transform

The element will transition no property: the transition is thus instant.

The element will only transtion the background property.

The element will only transtion the color property.

The element will only transtion the transform property.

The transition starts slowly, accelerates in the middle, and slows down at the end.

The transition starts slowly, and accelerates gradually until the end.

The transition starts quickly, and decelerates gradually until the end.

Like ease, but more pronounced.

The transition starts quickly, and decelerates gradually until the end.

The transition has a *constant speed.

The transition jumps instantly to the final state.

The transition stays at the initial state until the end, when it instantly jumps to the final state.

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

Applies a transparent color to the text. The text will still take up the space it should.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user's computer and in any @font-face resource.

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

The browser will use a serif font family: all characters have stroke endings.

The browser will use a sans-serif font family: no character has stroke endings.

The browser will use a monospace font family: all characters have the same width.

The browser will use a cursive font family.

The browser will use a fantasy font family.

The text will use the browser's default medium size.

You can use pixel values.

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use rem values.

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use relative keywords. The value is relative to the parent.

The following are available:

• larger
• smaller

You can use absolute keywords. The value is relative to the root element <html>.

The following are available:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

The text is not slanted.

Use the italic version of the font: the letters are slightly slanted.

Use the oblique version of the font: the letters are more slanted than italic.

Each letter uses its normal glyph.

Each letter uses its small capitalized version.

The text is in normal weight.

The text becomes bold.

You can use numeric values. They all correspond to a particular named weight:

• 100 Thin
• 200 Extra Light
• 300 Light
• 400 Normal
• 500 Medium
• 600 Semi Bold
• 700 Bold
• 800 Extra Bold
• 900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.

Reverts to the default value of the browser.

You can use unitless values: the line height will be relative to the font size.

You can use pixel values.

You can use em values: like with unitless values, the line height will be relative to the font size.

The text content is aligned to the left.

The text content is aligned to the right.

The text content is centered.

The text content is justified.

Removes any text decoration.

Underlines the text content.

The text is not indented.

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.

You can also use negative values.

The text content is clipped and not accessible.

The overflowing content is replaced by an ellipsis: …

The text content has no shadow.

You need at least two values:

• the first is the horizontal offset
• the second is the vertical offset

The shadow color will be inherited from the text color.

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.

Removes any text transformation: the text will appear the same as in the HTML code.

Turns the first letter of each word into a capital letter.

Turns all letters into capital letters.

Turns all letters into lowercase letters.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

The white space is exactly preserved.

• Sequences of spaces are preserved
• Lines break only on new lines and <br>

The white space is mostly preserved.

• Sequences of spaces are preserved
• Lines break on new lines, <br>, but also when reaching the end of the element

Only new lines are preserved.

• Sequences of spaces are combined into one
• Lines break on new lines, <br>, but also when reaching the end of the element

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

Words with no space will break as soon as they reach the end of a line.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.

Applies a transparent color to the text. The text will still take up the space it should.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user's computer and in any @font-face resource.

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

The browser will use a serif font family: all characters have stroke endings.

The browser will use a sans-serif font family: no character has stroke endings.

The browser will use a monospace font family: all characters have the same width.

The browser will use a cursive font family.

The browser will use a fantasy font family.

The text will use the browser's default medium size.

You can use pixel values.

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use rem values.

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use relative keywords. The value is relative to the parent.

The following are available:

• larger
• smaller

You can use absolute keywords. The value is relative to the root element <html>.

The following are available:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

The text is not slanted.

Use the italic version of the font: the letters are slightly slanted.

Use the oblique version of the font: the letters are more slanted than italic.

Each letter uses its normal glyph.

Each letter uses its small capitalized version.

The text is in normal weight.

The text becomes bold.

You can use numeric values. They all correspond to a particular named weight:

• 100 Thin
• 200 Extra Light
• 300 Light
• 400 Normal
• 500 Medium
• 600 Semi Bold
• 700 Bold
• 800 Extra Bold
• 900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.

Reverts to the default value of the browser.

You can use unitless values: the line height will be relative to the font size.

You can use pixel values.

You can use em values: like with unitless values, the line height will be relative to the font size.

The text content is aligned to the left.

The text content is aligned to the right.

The text content is centered.

The text content is justified.

Removes any text decoration.

Underlines the text content.

The text is not indented.

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.

You can also use negative values.

The text content is clipped and not accessible.

The overflowing content is replaced by an ellipsis: …

The text content has no shadow.

You need at least two values:

• the first is the horizontal offset
• the second is the vertical offset

The shadow color will be inherited from the text color.

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.

Removes any text transformation: the text will appear the same as in the HTML code.

Turns the first letter of each word into a capital letter.

Turns all letters into capital letters.

Turns all letters into lowercase letters.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

The white space is exactly preserved.

• Sequences of spaces are preserved
• Lines break only on new lines and <br>

The white space is mostly preserved.

• Sequences of spaces are preserved
• Lines break on new lines, <br>, but also when reaching the end of the element

Only new lines are preserved.

• Sequences of spaces are combined into one
• Lines break on new lines, <br>, but also when reaching the end of the element

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

Words with no space will break as soon as they reach the end of a line.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.