The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

Syntax: –

Selector { flex: flex-grow flex-shrink flex-basis}

Ex: –

div { flex: 2 3;}

FlexBox or Flexible Box–

What is it ?

–Its Layout mode a CSS 3 concept

Why we need it ?

–It helps to create responsive web pages

Flexbox Properties–

• flex-direction
• flex-wrap
• align-content
• flex-flow
• flow-grow
• flow-shrink
• flow-basis
• flex

flex-direction–

This property is used to set the direction of flexible items. If the element is not a flexible item, the flex-direction property has no effect. We can set this property to row (default), row-reverse, column, column-reverse.

Ex: –

div { flex-direction: column-reverse; }

• row – This is used to display the flexible items horizontally as row
• row-reverse – This is used to display the flexible items same as row, but in reverse order
• column – This is used to display the flexible items vertically as column
• column-reverse – This is used to display the flexible items same as column, but in reverse order

flex-wrap–

This property is used to specify whether the flexible items should wrap or not. If the elements are not flexible items, the flex-wrap property has no effect. We can set this property to nowrap (default), wrap and wrap-reverse.

Ex: –

div { flex-wrap: wrap; }

• nowrap – It specifies that the flexible items will not wrap
• wrap – It specifies that the flexible items will wrap if necessary
• wrap-reverse – It specifies that the flexible items will wrap, if necessary, in reverse order

flex-flow–

It is a shorthand property for the flex-direction and the flex-wrap properties. If the elements are not flexible items, the flex-flow property has no effect.

Syntax: –

Selector { flex-flow: flex-direction flex-wrap;}

Ex: –

div { flex-flow: row-reverse wrap;}

• Flex-direction values:
• row (default)
• row-reverse
• Column
• column-reverse.

• Flex-wrap values:
• nowrap (default)
• wrap
• wrap-reverse

flex-grow–

This property is used to specify how much the item will grow relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex-grow property has no effect. We can set this property to number (default 0).

Ex: –

div {flex-grow: 1;}

flex-shrink–

This property is used to specify how the item will shrink relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex-shrink property has no effect. We can set this property to number (default 1).

Ex: –

div {flex-shrink: 2;}

flex-basis

This property is used to specify the initial length of a flexible item. If the element is not a flexible item, the flex-basis property has no effect. We can set this property to number and auto (default).

Ex:–

div {flex-basis: 3;}

• number – A length unit, or percentage, specifying the initial length of the flexible item(s)
• auto – The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content

The post How to use Flex property in CSS? appeared first on scmGalaxy.