CSS3: How to use flex properties? – Part 3

Flex container’s children (flex items) properties

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1. order

By using “order” property we can change the order of each flex item available in the flex container.

{ order: <integer>; }

We must set order value in number, by default order value is 0. We can also use negative numbers in this property.

– See usage shown in the below examples.

CSS

HTML

Explanation: In this example we have set order values to “3”, “1” and “2” to “ITEM 1”, “ITEM 2” and “ITEM 3” respectively. It displays that each flex item changed their original position.

2. flex-grow

By using “flex-grow” property we can grow flex item if necessary. If some flex items have set flex-grow value, the remaining space in the flex container will be distributed equally in the other flex items.

{ flex-grow: <integer>; }

We must set flex-grow value in number, by default value is 0. Negative numbers are invalid.

– See usage shown in the below examples.

CSS

HTML

Explanation: In this example we have set “flex-grow” property values to item number “ITEM 1” and “ITEM 3” to “flex-grow:1” and “flex-grow:2” respectively. It displays that item number 1 and 3 are bigger than other two item number 2 and 4, which are equal space in same flex container. It means remaining space is equally distributed in item number 2 and 4.

3. flex-shrink

By using “flex-shrink” property we can shrink flex item if necessary.

{ flex-shrink: <integer>; }

We must set flex-shrink value in number, by default value is 0. Negative numbers are invalid. Check this property with flex item width property to get better result.

– See usage shown in the below examples.

Example 1:

CSS

HTML

Explanation: In this example you can see “ITEM 4” is with “flex-shrink” property and value is 0. Its not shrunk because of value 0, other flex items displays with their default space.

Example 2:

CSS

HTML

Explanation: In this example you can see “ITEM 4” is with “flex-shrink” property and value is 3. Now its shrunk as much as it can, other flex items displays with their default space.

4. flex-basis

By using “flex-basis” property we can set default length of the flex item.

{ flex-basis: <length> | auto; }

We must set flex-shrink value in number, by default value is 0. Negative numbers are invalid. Check this property with flex item “width” property to get better result.

– See usage shown in the below examples.

CSS

HTML

Explanation: In this example you can see “ITEM 2” length is set with “flex-basis” property.

5. flex

The “flex” property is shorthand property for “flex-grow”, “flex-shrink” and “flex-basis”.

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

By using “flex” property we can sets flexible length on flexible items.

– See usage shown in the below examples.

CSS

HTML

6. align-self

The “align-self” property is shorthand property for “flex-grow”, “flex-shrink” and “flex-basis”.

{ align-self: auto | flex-start | flex-end | center | baseline | stretch; }

By using “align-self” property we can specifies alignment for specific flex item inside the flexible container. This property use to overrides the flexible container’s “align-items” property.

– See usage shown in the below example.

CSS

HTML

Click here to check all the above examples in our demo page.