This property is used to specify the length of the item, relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex property has no effect.
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
