My Blog

The flex-shrink property specifies how much the item will shrink relative to the rest of the items of the flex container. If the size of items is larger than the container, items shrink to fit the flex container. When flex-shrink property is not included in the flex shorthand declaration, the value is set to 1 by default. If there are no flexible items,flex-shrink property won’t have…

The flex-grow property specifies how much the item will grow relative to the rest of items of the flex container. If all items of the container are specified by the flex-grow factor, then all items share the available space. A flexible item’s main size is either its height or width which depends on the value of flex-direction. This property is one of…

The flex-flow property is considered to be a shorthand property for the flex-wrap and flex-direction properties. This property is one of the CSS3 properties. It is a part of the Flexible Box Layout module. If there are not flexible items, the flex-flow property will not have any effect. The flex-flow property is used with the -Webkit- extension for such browsers, as Safari, Google Chrome, and Opera. Initial…

The flex-direction property specifies the main axis of a flex container and sets the order of flex items. It is one of the CSS3 properties. This property is a part of the Flexible Box Layout module. Flex items can be displayed: Initial Value row Applies to Flex containers. Inherited No. Animatable No. Version CSS3 DOM Syntax object.style.flexDirection = “row-reverse”; Syntax Example of…

The flex-basis property specifies the initial main size of the flexible item. When this property is not included, its value is set to 0%. The flex-basis property is one of the CSS3 properties. If there are no flexible items, the flex-basis property won’t have any effect. The flex-basis property will have a priority when both flex-basis with a value other than auto…

The flex property defines the components of a flexible length. It is a shorthand for the following properties: The flex-shrink and flex-basis are optional, i.e. you don’t have to include them in the flex declaration. The flex property is one of the CSS3 properties. This property is a part of the Flexible Box Layout module. If there are no flexible items, the flex property won’t have any effect. When…

The filter property is used to apply visual effects to an element (image). The filter property has the following values: Initial Value none Applies to Table-cell elements. Inherited No. Animatable Yes. Version CSS3 DOM Syntax object.style.WebkitFilter = “hue-rotate(360deg)”; Syntax Example of the filter property: Result Example of using the filter property to make the image brighter: In the following…

The fill property is used for setting the color of an SVG shape. It accepts any color value. You can find web colors with our Color Picker tool and in the HTML colors section. Initial Value black Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable Yes. Version SVG 1.1 DOM Syntax object.style.Fill = “#8ebf42”; Syntax Example of the fill property: Result Example…

The empty-cells property is used to set if the display borders and background should be shown or not on empty cells in a table. This property applies to tables that have a border-collapse property with the value of “separate”. For border-collapse property the default value is “show”. Initial Value show Applies to table-cell elements Inherited Yes. Animatable No Version CSS2 DOM Syntax object.style.emptyCells = “hide”; Syntax…

The display property defines the type of the box which is used for an HTML element. With the display property we can override the initial value of an element. For example, a block-level element could be displayed as an inline element by specifying a value of “inline”. An inline element does not accept the height and width properties. It will just ignore it. In…