CSS3 flexible boxes and flex property (flex)

The CSS3 flexible boxes, is a layout mode that ensures elements behaved predictably in a container even when their size is unknown and/or dynamic. Flex layout fits in all forms based on its viewing environment.

Terms associated with the flex layout model:

• Flex container: It is the Parent element that holds all flex items.
• Flex item: It is the child element held within the flex container.
• Axes: Each flex box have two axes: the main and cross axes. 
• Directions: The main-start or main-end sides that describes from where to start placing flex items within the flex container, starting from the main-start end and going to the end of main-end. The cross-start or cross-end sides determine where flex item fills flex lines from cross-start to cross-end.
• Dimensions: Main size and cross size are essentially the width and height of the flex container, each dealing with the cross and main axes respectively.
• Lines:  Flex items can be placed either on a singular line or on multiple lines according to the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.

The flex property (flex)   

The flex property describes the length of the item, relative to the rest of the flexible items inside the same container.    

Syntax:

selector {

      flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

}

Values:

The flex property may take one of following values:

• flex-grow - Determines how the growth of the item relative to other flexible items
• flex-shrink - Determines the shrinkage  of the item relative to other flexible items
• flex-basis - Determines the length of the item expressed as 'auto', 'inherit' or a number (%, px, em or any other length unit)
• auto - Let's browser decides how to size the it, but should be equal to '1 1 auto'
• none - No sizing, equal to '0 0 auto'
• initial or inherit - Initial should be equal to '0 1 auto' (default vallue)

Example

Example of basic flex property:

 

›› go to examples ››