CSS align-content Property

CSS align-content property aligns the flex lines along the cross axis within their flex container.

Unlike the align-items property, it aligns the flex lines instead of aligning the flex items. A flex line is a hypothetical line which groups flex items into a single line. So, by default, a flex line is same as a row.

The align-content property only works if the flex-wrap: wrap; is present and works efficiently if there are multiple lines of flex items.

In the example below, we have used align-content: center;. This means that all the flex lines will be aligned at the center of the cross axis. As cross axis is vertical by default. Therefore, all the flex items will be vertically centered within the flex container. Try out the example given below:

Example:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

The align-content: flex-start; aligns the flex lines at the beginning of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the top of the flex container. See the example below:

Example:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

The align-content: flex-end; aligns the flex lines at the end of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the bottom of the flex container. See the example below:

Example:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

The align-content: space-between; aligns the flex lines in such a way that the space between any two consecutive flex lines is exactly the same within their container. See the example below:

Example:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

The align-content: space-around; aligns the flex lines in such a way that the space around each and every flex line is exactly the same within their flex container. See the example below:

Example:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

The align-content: space-evenly; aligns the flex lines in such a way that the space before(top) and after(bottom) each flex line is same. This means that the remaining space is evenly distributed among the flex lines. See the example below:

Example:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

The align-content: stretch; is the default. In this case, the flex items stretch along the cross axis to cover its full length. As, by default the cross axis is vertical. Therefore, the flex items stretch vertically to cover the full height of the flex container. See the example below:

Example:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

CSS Syntax

The align-content property has the following syntax:

align-content: stretch|flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

Property Values

The align-content property accepts the following values:

stretchThis is the default value. The flex items stretch along the cross axis to cover the full height of the flex container.
flex-startThe flex lines align at the beginning of the flex container.
flex-endThe flex lines align at the end of the flex container.
centerThe flex lines align at the center of the flex container.
space-betweenThe space between any two consecutive flex lines is exactly the same.
space-aroundThe space around each flex line is the same.
space-evenlySpace before(top) and after(bottom) each flex line is exactly the same. This means that the extra space is evenly distributed among the flex linens.
initialSets the align-content property to its default value(stretch).
inheritInherits the align-content property from the parent element.

General Info

Default Valuestretch
InheritedNo
JavaScript Usageelement.style.alignContent = “center”

CSS align-items Property

CSS align-items property aligns the flex items along the cross axis(vertical by default) within the flex container.

In the example below, we have used align-items:center;. This means that all the flex items will be aligned at the center of the cross axis. As cross axis is vertical by default. Therefore, all the flex items will be vertically centered within their flex container.

Example:

.flex-container{
  display: flex;
  align-items: center;
}

The align-items: flex-start; aligns the flex items at the beginning of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the top of the flex container. See the example below:

Example:

.flex-container{
  display: flex;
  align-items: flex-start;
}

The align-items: flex-end; aligns the flex items at the end of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the bottom of the flex container. See the example below:

Example:

.flex-container{
  display: flex;
  align-items: flex-end;
}

The align-items: baseline; aligns the flex items at their baseline. The baseline is a hypothetical horizontal line upon which all the letters sit. So all the flex items will be aligned taking this line as a reference. See the example below:

Example:

.flex-container{
  display: flex;
  align-items: baseline;
}

The align-items: stretch; stretches all the flex items to the full length of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items stretch to cover the full height of their flex container. See the example below:

Example:

.flex-container{
  display: flex;
  align-items: stretch;
}

CSS Syntax

The align-items property has the following syntax:

align-items: flex-start|flex-end|center|baseline|stretch|initial|inherit;

Property Values

The align-items property accepts the following values:

flex-startAligns the flex items at the beginning of the flex container.
flex-endAligns the flex items at the end of the flex container.
centerAligns the flex items in the center of the flex container.
baselineAligns the flex items at their baseline. The baseline is a hypothetical line upon which all the letters sit.
stretchThis is the default. The flex items stretch along the cross-axis to cover the full height of the flex container.
initialSets the align-items property to its default value(stretch).
inheritInherits the align-items property from the parent element.

General Info

Default Valuestretch
InheritedNo
JavaScript Usageelement.style.alignItems = “flex-end”

CSS align-self Property

Similar to the align-items property, the align-self property aligns the flex items along the cross axis(vertical by default) within the flex container. But, instead of aligning all flex items, it aligns only the specified item(s).

The align-self property always overrides the align-items property.

In the example below, we have used align-self: center; for the second flex item. This means that this item will be aligned at the center of the cross axis. As cross axis is vertical by default. Therefore, this item will be vertically centered within its flex container.

Example:

#item2{
  align-self: center;
}

The align-self: flex-start; aligns the specified flex item at the beginning of the cross-axis. As cross-axis is vertical by default. Therefore, the specified flex item will be aligned at the top of the flex container. See the example below:

Example:

#item2{
  align-self: flex-start;
}

The align-self: flex-end; aligns the specified flex item at the end of the cross-axis. As cross-axis is vertical by default. Therefore, the specified flex item will be aligned at the bottom of the flex container. See the example below:

Example:

#item2{
  align-self: flex-end;
}

The align-self: baseline; aligns the specified flex item at its baseline. The baseline is a hypothetical horizontal line upon which all the letters sit. So the specified flex item will be aligned taking this line as a reference. See the example below:

Example:

#item2{
  align-self: baseline;
}

The align-self: stretch; stretches the specified flex item to the full length of the cross-axis. As cross-axis is vertical by default. Therefore, the specified flex item stretches vertically to cover the full height of its flex container. See the example below:

Example:

#item2{
  align-self: stretch;
}

CSS Syntax

The align-self property has the following syntax:

align-self: flex-start|flex-end|center|baseline|stretch|initial|inherit;

Property Values

The align-self property accepts the following values:

flex-startAligns the specified flex item at the beginning of the flex container.
flex-endAligns the specified flex item at the end of the flex container.
centerAligns the specified flex item in the center of the flex container.
baselineAligns the specified flex item at their baseline. The baseline is a hypothetical line upon which all the letters sit.
stretchThis is the default value. The specified flex item stretches along the cross-axis to cover the full height of the flex container.
initialSets the align-self property to its default value(stretch).
inheritInherits the align-self property from the parent element.

General Info

Default Valuestretch
InheritedNo
JavaScript Usageelement.style.alignSelf = “flex-end”

CSS all Property

CSS all property resets all the properties of an element to their initial or inherited value except for the unicode-bidi and direction property.

In the example below, properties font-size, color, and background will have no effect on the <p> element. This is because, after setting their values we have used all: initial; which will reset all these properties to their initial value. Try it out:

Example:

p{
  font-size: 20px;
  color: white;
  background: tomato;
  all: initial;
}

If we use all: inherit;, the current element inherits all the properties from the parent element. This means that all the properties applied to the parent element will also be applied to the child element. Refer to the example below:

Example:

.parent{
  font-size: 20px;
  border: 2px solid red;
  padding: 20px;
}
.child{
  all: inherit;
}

CSS Syntax

The all property has the below syntax:

all: initial|inherit|unset;

Property Values

The all property accepts the following values:

initialResets all the properties applied to an element to their initial value.
inheritResets all the properties applied to an element and inherits their value from the parent element.
unsetSets all the properties applied to an element to their inherited value if they are inherited by default or sets them to their initial value if they are not inherited by default.

General Info

Default ValueThere is no default value for this property.
InheritedNo
JavaScript Usageelement.style.all = “initial”;

CSS animation Property

CSS animation property is used to apply animation(s) on an element. The animation property is used in conjunction with the @keyframe rule to apply visual effects to the element.

This animation property is basically a shorthand of the following animation properties:

Example:

.div1{
  animation: moveRight 4s infinite;
}
.div2{
  animation: moveRight 4s infinite 2s;
}

Note: If we omit any property, its default value is used in the animation property.


CSS Syntax

The animation property has the below syntax:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animaiton-direction animation-fill-mode animation-play-state|initial|inherit;

Property Values

The animation property accepts the following values:

animation-nameSpecifies the name of the @keyframe at-rule which is to be applied to the selected element.
animation-durationSpecifies the time in seconds(s) or milliseconds(ms) that the animation will take to complete
animation-timing-functionSpecifies how the animation will grow. It basically defines the speed curve of the entire animation.
animation-delaySpecifies the time delay in seconds(s) or milliseconds(ms) which the animation will take before starting.
animation-iteration-countSpecifies how many times the animation should be played.
animation-directionSpecifies the direction in which the animation will play.
animation-fill-modeThis property allows us to define a style for the element when the animation is not running.
animation-play-stateSpecifies whether the animation is running or paused.
initialSets the animation property to its default value.
inheritInherits the animation property from the parent element.

General Info

Default Valuenone 0 ease 0 1 normal none running
InheritedNo
JavaScript Usageelement.style.animation = “moveRight 4s infinite”;

CSS animation-delay Property

CSS animation-delay property specifies how long the animation should wait before it starts.

The animation-delay is specified either in seconds(s), or milliseconds(ms). By default, it is set to 0s, which means that the animation starts instantly without any delay. It can be positive, negative, or zero. See implementation in the example below:

Example:

.div1{
  animation-delay: 2s;
}
.div2{
  animation-delay: 4s;
}

When the animation-delay is set to a negative value, it skips that much time and starts as if it had already been playing for that time period.

For example, if an animation has a 5s duration and you set the animation-delay to -2s, the animation skips the first 2s and is played only for the last 3s and behaves as if it had already been playing for those 2s. See the example below:

Example:

.div1{
  animation-delay: -2s;
}

CSS Syntax

The animation-delay property has the following syntax:

animation-delay: time|initial|inherit;

Property Values

The animation-delay property accepts the following values:

timeSpecifies the delay in seconds(s), or milliseconds(ms). It can be positive, negative, or zero. The default value is 0s.
initialSets the animation-delay property to its default value(0s).
inheritInherits the animation-delay property from the parent element.

General Info

Default Value0s
InheritedNo
JavaScript Usageelement.style.animationDelay = “2s”

CSS animation-direction Property

CSS animation-direction property specifies in which direction the animation should play.

By default, the animation is played in the forward direction. But using the animation-direction property, we can easily change it to ‘reverse’, or ‘alternate’, etc. See the example below:

Example:

.div1{
  animation-direction: reverse;
}
.div2{
  animation-direction: alternate;
}

CSS Syntax

The animation-direction property has the following syntax:

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

Property Values

The animation-direction property accepts the following values:

normalThe animation is played normally in the forward direction. This is the default value.
reverseThe animation is played in the reverse direction.
alternateThe animation is first played in the forward direction and then in the reverse.
alternate-reverseThe animation is first played in the reverse direction and then in the forward.
initialSets the animation-direction property to its default value(normal).
inheritInherits the animation-direction property from the parent element.

General Info

Default Valuenormal
InheritedNo
JavaScript Usageelement.style.animationDirection = “alternate”

CSS animation-duration Property

CSS animation-duration property specifies the time that the animation takes to complete its one cycle.

The duration time is specified in seconds(s) or milliseconds(ms). By default, the duration time is set to 0s, which means that the animation happens instantly and we can not observe it.

The higher the value of the animation duration, the slow the animation. See implementation in the below example:

Example:

.div1{
  animation-name: moveRight;
  animation-duration: 5s; 
}
.div2{
  animation-name: moveRight;
  animation-duration: 8s; 
}

CSS Syntax

The animation-duration property has the following syntax:

animation-duration: time|initial|inherit;

Property Values

The animation-duration property accepts the following values:

timeSpecifies the animation duration time in seconds(s) or milliseconds(ms). The default value is 0.
initialSets the animation-duration property to its default value(0).
inheritInherits the animation-duration property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.animationDuration = “5s”

CSS animation-fill-mode Property

CSS animation-fill-mode property allows us to define a style for the element when the animation is not running. In simple words, this property can be used to apply styles to the element before the animation starts or after it has finished running, or both.

In the example below, we have used animation-fill-mode: forwards;. This shows that the element will retain its styles at the end of the animation as defined in the last keyframe. Therefore, the animated element in the example below will not jump back to its initial state after finishing the animation. Try it out:

Example:

div{
    animation-name: moveRight;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
@keyframes moveRight{
    from{
        left: 0px;
    }
    to{
        left: 200px;
    }
}

The animation-fill-mode: backwards; specifies that the styles defined in the first keyframe will be applied to the element before the animation starts(i.e during the animation delay period). Therefore, the background color of the animated element in the example below will be pink during the animation delay(i.e. first 2 seconds). Try it out:

Example:

div{
    animation-name: moveRight;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}
@keyframes moveRight{
    from{
        background: pink;
        left: 0px;
    }
    to{
        left: 200px;
    }
}

The animation-fill-mode: both; is a combination of animation-fill-mode: forwards; and animation-fill-mode: backwards;. In this scenario, the styles defined in the last keyframe apply to the animated element when the animation has finished and the styles defined in the very first keyframe apply to the animated element before the animation starts(i.e. during the animation delay).

Therefore, the animated element in the example below will have a pink background during the animation period and will not jump back to the beginning once the animation has finished running. Try it out:

Example:

div{
    animation-name: moveRight;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-fill-mode: both;
}
@keyframes moveRight{
    from{
        background: pink;
        left: 0px;
    }
    to{
        left: 200px;
    }
}

CSS Syntax

The animation-fill-mode property has the below syntax:

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Property Values

The animation-fill-mode property accepts the following values:

noneThis is the default value. No specific style applies before(during delay) or after the animation.
forwardsStyle defined in the last keyframe applies to the element after the animation has finished.
backwardsStyle defined in the first keyframe applies to the element before the animation starts(i.e. during the animation delay).
bothStyle defined in the first keyframe applies to the element before the animation starts(i.e. during the animation delay) and the style defined in the last keyframe applies to the element after the animation has finished.
initialSets the animation-fill-mode property to its default value(none).
inheritInherits the animation-fill-mode property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.animationFillMode = “forwards”;

CSS animation-iteration-count Property

CSS animation-iteration-count property specifies how many times the animation should be repeated before it completely stops.

By default, the iteration count is set to 1, which means that the animation will be played just once.

Example:

div{
  animation-iteration-count: 2;
}

If we want the animation to be repeated again and again, we can set the animation-iteration-count to infinite. See the example below:

Example:

div{
  animation-iteration-count: infinite;
}

CSS Syntax

The animation-iteration-count property has the following syntax:

animation-iteration-count: number|infinite|initial|inherit;

Property Values

The animation-iteration-count property accepts the following values:

numberSpecify the number of times an animation should be repeated. The default value is 1, which means that the animation is played just once.
infiniteSpecify that the animation is repeated again and again(forever).
initialSets the animation-iteration-count to its default value(1).
inheritInherits the animation-iteration-count from the parent element.

General Info

Default Value1
InheritedNo
JavaScript Usageelement.style.animationIterationCount = “infinite”