The font-display property defines how font files are downloaded and displayed by the browser. This property has the following values: The typography was used to be limited to local fonts where the only available fonts were the ones called “web-safe”. Then came @font-face rule allowing to upload font files to a server and write a set of rules naming…

The CSS @font-face is a rule which allows web designers to define online fonts to display text on their website. So, web designers won’t need to use “web-safe fonts” anymore. We must first define a name for the font (like myFirstFont) in the new @font-face rule and then point to the font file. Each browser has its own format.…

The font property is a shorthand property for the following properties: You can set all the properties with the following order: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family. The line-height property is used for setting the space between lines. It is required to define font-size and font-family properties’ values. If one of the values is missed, its default value is used. All the…

The float property defines in which side of the container the elements should be placed, thus allowing the text or other elements to wrap around it. The property has three values: none, left and right. This property is directly related to the clear property which defines whether an element should be next to floating elements or it should be…

The flex-wrap property defines whether flexible items should wrap or not. In other words, it defines whether the items are forced into a single line or the items can flow on multiple lines. If there are no flexible items, the flex-wrap property won’t have any effect. The flex-wrap property is one of the CSS3 properties. Initial Value nowrap Applies to Flex containers.…

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…