Properties

Last updated on

The animation property is used to call and control an @keyframe animation. Like this: .element-to-animate { animation: NAME-YOUR-ANIMATION 5s infinite; } Which refers to a keyframe like this: @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } You’ll need vendor prefixes to get good browser support: @-webkit-keyframes NAME-YOUR-ANIMATION { 0% { opacity:

Continue reading →

Last updated on

The align-self property is a sub-property of the Flexible Box Layout module. It makes possible to override the align-items value for specific flex items. The align-self property accepts the same 5 values as the align-items: flex-start: cross-start margin edge of the item is placed on the cross-start line flex-end: cross-end margin edge of the item is placed on the cross-end line center: item

Continue reading →

Last updated on

The align-items property is a sub-property of the Flexible Box Layout module. It defines the default behaviour for how flex items are laid out along the cross axis on the current line. You can think of it as the justify-content version for the cross-axis (perpendicular to the main-axis). The align-items property accepts 5 different values: flex-start: cross-start margin edge of the items

Continue reading →

Last updated on

The align-content property is a sub-property of the Flexible Box Layout module. It helps aligning a flex container’s lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The align-content property accepts 6 different values: flex-start: lines

Continue reading →